[React] Props vs State, Class component vs Functional component 비교하기

 

1. Props vs State

props와 state는 모두 HTML의 출력물에서 나오는 것들로 구성된다. 

두 개 모두 컴포넌트의 입력 데이터로 컴포넌트에서 다른 컴포넌트로 데이터를 보내며 렌더링을 하며 보여주는 것이다.

이때 Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼때 사용하며 Immutable, 즉 변할 수 없는 읽기 전용이다.

State의 경우 각 컴포넌트가 데이터, 상태에 대한 데이터를 가지고 있으며 Mutable, 변경할 수 있는 객체이다. (setState()로 변경)

 

Props의 예시로는 아래와 같다.

import React, { Component} from 'react';
import Test from './Test';

Class ReactTest extends Component {
	render() {
		return <Test />;
	}
}

export default ReactTest;

 

State의 예시로는 아래와 같다.

import React, { Component} from 'react';

Class ReactTest extends Component {
	state = {
		num: 1
	};

	render() {
		<div>
			<h1>num</h1>
		</div>
	}
}

export default ReactTest;

 

코드를 보면 알 수 있다싶이 Props의 경우 컴포넌트채로 return을 하지만 State의 경우 컴포넌트가 자체적으로 가진 state 데이터를 return 하고 있는 것을 확인할 수 있다.

 

 

2. Class Component vs Functional Component

 

component lifecycle

원래는 가장 큰 차이는 위의 lifecycle에 정의된 것들을 할 수 있느냐 없느냐 였다.

 

Class Component의 경우

1. lifecycle에 정의된 메소드를 이용할 수 있다.

2. 비교적 복잡한 동작을 사용할 수 있다.

3. 비교적 느리고 코드가 킬다.

 

Functional Component의 경우

1. lifecycle에 정의된 메소드들을 사용할 수 없다.

2. 비교적 간단한 동작만 사용할 수 있다.

3. 비교적 빠르고 코드가 짧다.

 

와 같은 특징을 가지고 있었는데 위의 '원래는'이 들어간 것처럼 과거에는 그랬었다.

React 16.8 버전이후에는 React Hook이 등장하며 달라졌다.

Hook을 이용하여 Functional도 Class 형처럼 여러가지 복잡한 동작과 lifecycle에 정의된 메소드들을 사용할 수 있게 된 것이다.

그래서 요즘에는 Class의 장점을 Functional이 가져갔기때문에 Class Component보다 Functional Component를 더 많이 사용하는 추세라고 한다.

 

 

 

참고 자료

uberVU/react-guide