Class형 React와 함수형 React

발단

프론트 엔드 개발을 하다 궁금한 일이 생겨 검색을 하다보면 공용 문서에 class형태로 작성된 컴포넌트가 눈에 띄는 일이 잦다.

해당 라이브러리에 대해 가장 잘 설명해주는 공용문서에서 나와 다른 방식으로 코딩을 하다보니 내가 사용하는 함수형 컴포넌트에 대해 의문이 생겼다.

function whyAreYouUsingClass() {
  return class extends React.Component {
    constructor(props) {
      // 관련코드
    }

    componentDidMount() {
      // 관련코드
    }

    ...후략

공용문서에서 class형태로 작성된 코드를 처음 봤을 때, Vue나 ES6 코드에서 보던 LifeCycleHook들이 보였다. 아마 구버전의 React에서 사용하거나 다른 프레임워크를 사용하다 넘어 온 사람을 위한 범용적인 문법이 아닐까 생각했다.

Class형으로 작성된 React 컴포넌트와 함수형으로 작성된 컴포넌트는 어떤 차이가 있을까?

---

공식 문서 확인 결과

내가 생각한 이유도 포함되어 있었지만 다른 이유도 존재했다. 공식문서를 참고한 결과는 다음과 같다.

1. 함수형 컴포넌트는 React 16.8 버전부터 지원한다.
2. 복잡한 생애주기에 대한 관리가 필요한 경우 class형을 사용하는게 더 적절할 수도 있다.

상세

---

함수형 컴포넌트는 React 16.8 버전부터 지원한다.

• 따라서 모든 레거시 코드는 class형으로 구성되어 있을 것이다.
• 또한 Vue나 여타 다른 프레임워크를 사용하다 온 사람들이 익숙할 ES6 출신(?)의 LifeCycleHook을 사용할 수 있다.

복잡한 생애주기에 대한 관리가 필요한 경우 class형을 사용하는게 더 적절할 수도 있다.

• 함수형 컴포넌트의 경우 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 섬세한 조절이 가능한 hook이 부족하다.
• 물론 componentWillUnmount의 경우 useEffect의 return값과 비슷하게 작동하긴 한다. 이와 비슷하게 대부분의 생애주기 hook들은 함수형 컴포넌트에서도 구현할 수 있다.

결론

현재 react의 버전이 18.2까지 나왔으니 신규 프로젝트는 함수형으로 작성하는걸 추천한다고 한다.

생애주기 hook을 쓸 수 있는 class형의 장점도 함수형들의 내장형 hook이나 custom hook을 사용하면 적절히 처리할 수 있으니

class형 컴포넌트를 반드시 사용해야하는 프레임워크나 라이브러리를 쓸게 아니라면 함수형 컴포넌트를 사용하는게 좋다.