서론
리액트에서 컴포넌트는 크게, 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘는데, 리액트 팀은 함수형 컴포넌트의 사용을 권장하고 있다. 클래스형 컴포넌트가 어떤 문제를 갖고 있고, 함수형 컴포넌트는 이를 어떻게 극복하기에, 함수형 컴포넌트가 권장되는지 살펴보자.
본론
문제1. 재사용성이 떨어진다
클래스형 컴포넌트의 내부 논리를 여러 상황에서 재사용하고 싶을 때, Higher Order Component와 Render props 패턴을 사용했다고 한다. 이 두 패턴의 문제점은, 재사용을 위해 wrapper 컴포넌트가 필요하다는 점이다. wrapper 컴포넌트를 사용하면, 컴포넌트 계층을 바꿔야 하기에, 컴포넌트 계층 구조를 변경하지 않으면서, 컴포넌트의 내부 논리를 재사용하는 방법이 필요했다.
솔루션1. custom hooks
컴포넌트의 내부 논리 중, 재사용하고 싶은 논리를 커스텀 훅으로 추출해서, 여러 컴포넌트에서 재사용할 수 있다.
문제2. 너무 큰 클래스형 컴포넌트
클래스형 컴포넌트는, 클래스를 사용하기 때문에 적지 않은 양의 boilerplate 코드를 사용하게 된다. 또한, 생애주기 메소드의 개수가 너무 많고, 이들이 분리돼 있다. 생애주기 메소드가 서로 연관있는 경우가 종종 있는데, 분리돼 있어서, 버그의 발생 가능성이 높아지고 가독성이 떨어진다.
예시로, componentDidMount 메소드를 통해, 상태에 구독했다고 하자. 그렇다면, componentWillUnmount 메소드를 통해, 컴포넌트 인스턴스가 없어질 때 구독 해제를 해야할 것이다. 이처럼, 한 생애주기 메소드안의 행동이, 다른 생애주기 메소드가 해야 할 행동을 결정짓는 경우가 발생한다. 이처럼 밀접한 관계를 갖는 코드를 분리시키는 건, 좋은 패턴이 아니다.
솔루션2. useEffect 훅
리액트 공식 문서에도 나와있듯이, useEffect 훅은 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 봐도 무방하다.
기존의 클래스형 컴포넌트에서는 분리돼있던 생애주기 메소드의 역할을, useEffect 훅 하나로 수행하면서, 코드도 짧아지고, 가독성도 높아지는 효과를 얻을 수 있다.
문제3. 클래스는 헷갈린다
클래스의 this 키워드의 바인딩은 많은 사람들이 헷갈려 하는 부분이다. 그리고, 이를 해결하기 위해, 명시적으로 바인딩을 하곤 하는데, 이는 코드의 불필요한 증가로 이어진다.
솔루션3. 함수
함수형 컴포넌트는 말 그대로, 함수이기 때문에, 클래스의 this 키워드 바인딩 문제가 일어날 수 없다.
참고자료
인프런 - 웹 게임을 만들며 배우는 React
리액트 공식 문서 - Using the Effect Hook
리액트 공식 문서 - 훅을 도입한 이유
