그냥 다 class형으로 쓰면 안돼?
React 공식문서에는 함수형 컴포넌트로 사용하기를 권장한다.
그렇담 그냥 입다물고 함수형 컴포넌트로 사용하자...
리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두 가지 방법에 대해 모두 다 잘 알고 있으며, 필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 한다.
class 형
클래스형 컴포넌트와 함수형 컴포넌트의 역할은 동일하다. 차이점이 있다면 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다는 점이다. 그리고 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다. 또한 과거의 prototype을 이용해서 구현하던 클래스 문법을 ES6 문법 부터는 class 문법을 사용하여 구현할 수도 있다.
함수형
반면 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다는 장점이 있다. 과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었는데, 이러한 단점은 앞서 언급한 것처럼 리액트 훅이 도입되면서 해결되었다. 함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수 선언 방식이 있고, ES6의 화살표 함수(arrow function) 방식도 있다. 화살표 함수의 경우 함수를 파라미터로 전달할 때 유용하다.
화살표 함수로 선언을 하게 되면 this.bind() 가 필요 없어진다. React가 처음 나왔을때 이 기괴하게 생긴 코드. this.bind()때문에 말이 많았다고 한다. 의미없는 코드가 들어가야하고 this.bind()를 꼭 해줘야 Props나 State를 선언 할 때 this를 인식 할 수 있기 때문에 효율성을 좋아하는 개발자들이 가만히 있을리 없다.
화살표 함수가 나오고, 훅들이 나오기 시작(useState, useEffect, useRef...등등)하면서 더 이상 메모리 자원을 더 사용하는 클래스형 컴포넌트는 외면받기 시작한다. 하지만 우리는 주니어 개발자로써 유지보수와 과거에 작성된 코드들을 이해하려면 두 선언 스타일 모두 알아야겠다.
