React Component - Class, Function

 

React의 특징은 Component 단위로 코드를 쪼개어 UI를 구성한다는 점이다. 그렇다면 Component는 어떻게 만들 수 있을까? 

React에서 Component를 만드는 방법은 2가지가 있다. 바로 Class 혹은 Function을 만드는 것이다. 

 

React에서는 Class와 Function 2가지 Component가 존재한다.

그렇다면 두 Component의 차이는 무엇일까? 아래의 예시를 보자.

 

Class 

import React, { Component } from 'react';
class App extends Component {
	constructor(props){
		super(props);
		this.state = {fruit: 'apple'};
	}
	render(...);
}

 

Function

import React from 'react';
function App() {
	return (...);
}

 

위의 예시를 알 수 있듯이, Functional component는 Class component보다 구조가 간단하고 코드가 간결하다는 장점이 있다.

그러나, Functional component는 state와 lifecycle과 같은 React의 기능을 사용하지 못한다는 큰 단점이 존재한다. (Class component에서는 지원한다)

 

그렇다면 Class component만을 사용해야 하는 것일까?

아니다. React 버전 16.8부터 Hook이 등장하면서 Functional component에서도 기존에 사용하지 못했던 기능들을 쓸 수 있게 되었고, Class component와 대등한 위치에 오르게 되었다. 

즉, Functional component에서 Hook을 사용하면, React 기능들을 사용할 수 있으면서 코드도 더 간결하게 작성할 수 있다.

useState라는 Hook을 사용하면 Function 내부에서도 state를 사용할 수 있다. 다음 예시를 참고하자.

import React, { useState } from 'react'; //useState를 import
function App() {
	const [fruit, setFruit] = useState('apple'); //추가된 부분
	return (...);
}

 

이러한 이유로 많은 개발자들이 functional component와 hook을 함께 사용하지만, 공식문서에 의하면 React에서 Class를 제거할 계획은 없다고 밝혔고, 이미 class component로 작성된 코드들이 존재하기 때문에 2가지 component 모두 알고 있는 것이 좋다.

 

 

 

 

 

참고: https://ko.reactjs.org/docs/hooks-intro.html