클래스형 컴포넌트 , 함수형 컴포넌트 ?

포트폴리오 정리를 하다 보니 작년에 리액트를 잠깐 찍먹 느낌으로 공부했던 프로젝트의 코드르 보게 되었다. 그 프로젝트에서는 ComponentDidMount, ComponenetUpdate, ComponentWillUnMount를 사용했던 것을 볼 수 있었다. 최근에 다시 리액트 공부를 하고 있는데 19년도 리액트 16.8v부터 훅(hook)을 지원하기 시작해서 현재는 공식문서에 함수형 컴포넌트와 훅을 같이 사용하라는 것이 권장되고 있다고 한다.

 

( 왜 나는 몰랐지 ..?)

 

그래서 공부를 하고 있는데 이제 더이상 클래스 컴포넌트보다는 함수형 컴포넌트를 사용하는 것이 사용하기도 편하고 , 메모리 자원을 덜 차지하기 때문에 효율적이라는 것이다. 많은 개발자들의 블로그에서 언급이 되는 장점인 것 같다 또한 this 선언자 또한 붙히지 않아도 되니 this에 대한 이해, JS 클래스에 대한 깊은 이해도 적어지게 되었다.(나의 개인적인 생각..)

 

코드에 대한 예를 들면서 설명하는게 제일 이해가 잘 가지만 아직 공부하고 있는 입장에서 자세한 설명을 하기에는 내 부족한 지식이 보일 것 같다. 그래서 일반적인 차이를 글로 통해서 나열해 보겠다.

 

클래스형 컴포넌트

• state기능과 lifecycle 기능을 사용할 수 있다.
• 임의의 메서드를 정의 가능하다.
• 클래스형 컴포넌트에서는 render() 함수가 꼭 필요하고 그 안에 JSX를 반환해야 한다.

함수형 컴포넌트

• state 기능과 lifecycle 기능을 사용할 수 없다. -> 훅(hook)으로 해결!
• 메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.
• 클래스형 컴포넌트보다 더욱 선언하기가 편하다 ( const [counter, usecounter] = useState(0) )

물론 아직 함수형 컴포넌트가 등장한 지 얼마 지나지 않았기 때문에 무조건적으로 함수형 컴포넌트가 좋다!라는 말은 아끼는 게 좋지 않을까 싶다. 공부를 계속하면서 클래스형 컴포넌트와 함수형 컴포넌트에 대해서 좀 더 자세히 설명할 수 있는 수준이 되면 이 글을 리팩터링 해서 정리를 하지 않을까 싶다.