Class / Functional Component (클래스형 컴포넌트, 함수형 컴포넌트)

React에서 Functional Component는 없는 단어이다.

 

• 우선, 공식 사이트를 보게 되면, Functional Component(함수형 컴포넌트)라는 말은 존재하지 않는다.
• Functional Component(함수형 컴포넌트) 대신 Function Component(함수 컴포넌트)라고 찾아보게 된다면, 이에 대한 설명은 찾아볼 수 있다.
• 이에 대한 이유는, Function Component(함수 컴포넌트)는 참조 투명할 수도, 아닐 수도 있기 때문에 "Functional"(함수형) 수식어를 붙이는 것은 오해를 불러 일으킬 수도 있기 때문이다.
  └ 참조 투명성에 대해서는 알아서 검색해보길 추천한다!

※ 과거에는 공식 사이트에서도 "Functional Component" (함수형 컴포넌트) 라고 불렸었지만, 어떤 까칠한 사람 때문에 "Function Component"라고 변경되었다는 말이 있다. ※

 

 

Class / Functional component

 

• React에서 Hooks를 쓸 수 있게 된 지금 "클래스는 함수 컴포넌트에 비해 더 많은 기능(state 등)을 제공한다"는 말은 올바른 답변이라 보기 힘듬
• 두 컴포넌트 중 성능면에서 차이는 무시할 정도로 작음

 

 

함수형 컴포넌트는 렌더링 된 값들을 고정시킴

 

	function Profile(props) {
	const Message = () => {
	alert('Followed ' + props.user);
	};
	const onClickFollow = () => {
	setTimeout(Message, 3000);
	};
	return (
	<button onClick={onClickFollow}>Follow</button>
	);
	}

view raw Component.js hosted with ❤ by GitHub

└ 위의 컴포넌트는 setTimeout을 이용해 네트워크 요청을 보내고 확인 창을 띄워주는 역할을 함
└ 예를들어, props.user가 Hooni라면, 버튼을 누르고 3초 뒤에 Followed Hooni라는 창이 띄워짐

 

 

	class Profile extends React.Component {
	Message = () => {
	alert('Followed ' + this.props.user);
	};
	onClickFollow = () => {
	setTimeout(this.Message, 3000);
	};
	render() {
	return <button onClick={this.onClickFollow}>Follow</button>;
	}
	}

view raw Component.js hosted with ❤ by GitHub

└ 클래스 컴포넌트로 변환

 

 

 

	import React from "react";
	import ReactDOM from "react-dom";
	import ProfilePageFunction from "./ProfilePageFunction";
	import ProfilePageClass from "./ProfilePageClass";
	class App extends React.Component {
	state = {
	user: "A"
	};
	render() {
	return (
	<>
	<label>
	<b>Choose profile to view: </b>
	<select
	value={this.state.user}
	onChange={(e) => this.setState({ user: e.target.value })}
	>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	</select>
	</label>
	<h1>Welcome to {this.state.user}’s profile!</h1>
	<p>
	<ProfilePageFunction user={this.state.user} />
	<b> (function)</b>
	</p>
	<p>
	<ProfilePageClass user={this.state.user} />
	<b> (class)</b>
	</p>
	</>
	);
	}
	}
	const rootElement = document.getElementById("root");
	ReactDOM.render(<App />, rootElement);

view raw index.js hosted with ❤ by GitHub

└ index.js

 

 

	import React from 'react';
	class ProfilePage extends React.Component {
	showMessage = () => {
	alert('Followed ' + this.props.user);
	};
	handleClick = () => {
	setTimeout(this.showMessage, 3000);
	};
	render() {
	return <button onClick={this.handleClick}>Follow</button>;
	}
	}
	export default ProfilePage;

view raw class.js hosted with ❤ by GitHub

└ classComponent.js

 

 

	import React from 'react';
	function ProfilePage(props) {
	const showMessage = () => {
	alert('Followed ' + props.user);
	};
	const handleClick = () => {
	setTimeout(showMessage, 3000);
	};
	return (
	<button onClick={handleClick}>Follow</button>
	);
	}
	export default ProfilePage;

view raw function.js hosted with ❤ by GitHub

└ functionComponent.js

 

• Follow 버튼을 누르고, 3초가 지나기 전 선택된 프로필을 바꾸면 알람창의 결과가 다른 것을 볼 수 있음
  └ A의 프로필에서 함수 컴포넌트의 Follow 버튼을 누른 후 B의 프로필로 이동하면
      알림창에는 "Followed A"라고 쓰여져 있음
  └ 위의 똑같은 동작을 클래스형 컴포넌트에서 하게 되면 알림창에 "Followed B"가 쓰여져 있음

 

 

함수 컴포넌트와 클래스형 컴포넌트 차이점

 

• 함수 컴포넌트
  ⓐ props 객체 인자를 받은 후, react element를 반환

 

• 클래스형 컴포넌트
  ⓐ state 초기값을 constructor 메서드에서 생성해줘야 함
  ⓑ constructor을 사용할 때는 super(props)를 반드시 호출해줘야 함
  ⓒ this.state로 조회하며, this.setState를 통해서 state값을 바꿔줌
  ⓓ constructor 메서드를 쓰고 싶지 않을 때는 화살표 함수를 써서 새 메서드를 만들 때마다
      constructor를 수정해야 하는 부작용을 방지해줌

 

• 함수 컴포넌트의 특징
  ⓐ 선언하기 편함
  ⓑ 메모리 자원 적게 사용
  ⓒ 파일 크기가 클래스형과 비교해서 더 적음(하지만, 별 차이 없음)
  ⓓ Hooks 사용

 

• 클래스형 컴포넌트의 특징
  ⓐ render 함수 필수
  ⓑ state와 라이프사이클 API 기능 사용가능
  ⓒ 임의 메서드 정의