[React] function 컴포넌트 vs class컴포넌트

 

리액트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지의 컴포넌트 선언 방식이 존재한다.

리액트의 컴포넌트는 단순한 템플릿이 아닌, 라이프 사이클 API를 통해 이벤트에 따른 작업 수행과 더불어 주어진 데이터에 맞춰 UI를 만들어주는 기능을 포함하고 있다.

 

클래스형 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트는 component lifecycle에 정의된 메소드(componentWillMount(), componentDidMount() 등)을 이용해 각 순서에 따라 특정한 동작을 수행하도록 할 수 있다. 

 

리액트 라이프 사이클

 

함수형 컴포넌트

과거에는 클래스형 컴포넌트를 주로 사용했으나 16.8v부터 Hooks의 지원으로 함수형 컴포넌트의 사용이 늘었고 공식문서에서도 함수형 컴포넌트와 훅을 함께 사용하길 권장하고 있기 때문에 create-react-app으로 프로젝트를 생성하면 기본적으로 function으로 이루어진 App컴포넌트를 제공해준다.

함수형 컴포넌트

useState를 이용해 state를 생성하고 원하는 props를 할당하여 props를 state처럼 사용할 수 있고,

ex) const [propsValue, setPropsValue] = useState(props.value1);

useEffect를 사용해 lifecycle의 동작을 만들어낼 수 있다.

ex)

useEffect( function(){

// 동작

}, [] //[]안에 아무것도 없을 경우 componentDidMount 메소드와 같고, 특정 변수명을 입력할 경우 해당 변수의 값이 변경될 경우 동작한다.

);

 

기본적인 컴포넌트 선언 방식의 차이는 이렇지만 이 외에도 더 파고들면 state의 변경 시점을 따라가느냐 등의 디테일한 차이점들을 확인할 수 있다.  아래 링크에서 리액트에 대한 다양한 연구들을 확인할 수 있으니 추천한다. 물론 한국어도 지원한다.

overreacted.io/

Overreacted