[React]Function Component, Class Component

컴포넌트를 function으로 선언하는것과, class로 선언하는 각각의 방식이 있다.

 

function으로 component를 export

class로 conponent를 export

 

2가지 선언방식은 어떤점에서 차이가 있을까?

 

 이름 그대로 class component(이하 CC)는 class를 기반으로 작성되는 컴포넌트이며, function component(이하 FC)는 함수로 컴포넌트를 작서앟는 것이다.

 

 React에서 컴포넌트의 역할은 단순하게 Template의 역할을 넘어서 Data의 Flow를 제어하고, Data에 따라 UI를 만들어주며, Component가 화면에서 변동이 있을 때(나타날경우, 사라질경우 등) 작업을 수행할 수 있다.

 

 두가지 컴포넌트의 역할은 동일하다.

 - CC는 state기능 및 Life Cycle 기능을 사용할 수 있으며, 임의의 Method를 정의할 수 있다는 점에서 차이가 있다. 또한 CC에서는 render()가 필수적이고 render()내에서 JSX를 return한다.

 - FC는 state와 Life Cycle API를 사용할 수 없다는 단점이 있었지만, React Hooks가 도입되며 이러한 단점은 해결되었다. (Hooks에 대한 내용은 추후 정리하여 포스팅할것이다.)

 

 일단 CC와 FC의 역할은 동일하다. React를 사용하기 시작한지 얼마 되지 않았지만 각 컴포넌트 선언방식에 대한 개인적인 느낀점은 FC가 좀더 사용하기 편했다. Hooks를 활용하고 function 내부에서 변수라던가, 함수라던가 선언이 상당히 편했다. React 공식 문서에서도 function과 Hooks를 같이 활용하는 것을 장려하고 있기도 하고...

 

현재 test-client라는 폴더 내부에서 작성 프로젝트를 작성 중이라 client 폴더를 새로 만들어서 소스코드를 다시 정리하며 프로젝트를 작성할 생각이고, 상황에 따라서 CC를 FC로 바꾸려고 한다.