이제 프로젝트를 시작합니다! 시작에 앞서 한가지 큰 고민이 있습니다.
"어떤 컴포넌트 베이스를 사용할까? 함수형 컴포넌트? 클래스 컴포넌트?"
React의 컴포넌트에는 함수형과 클래스 컴포넌트 두가지가 있다는 것을 익히 들었으며, 어떤 문제를 해결하기 위해서 react hook이 등장한 것을 알고 있습니다.
그러면 react hook의 등장한 배경을 알게 된다면 자연스럽게 클래스 컴포넌트와 함수형 컴포넌트의 차이점을 알 수 있을 것 입니다.
역사
react 공식 문서에 인용된 내용입니다.
Hooks solve a wide variety of seemingly unconnected problems in React that we’ve encountered over five years of writing and maintaining tens of thousands of components. Whether you’re learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
Hook은 5년간 수만 개의 컴포넌트를 작성하고 유지하는 동안 겉보기에 React와 관련없어보였던 문제를 해결합니다. React를 배울 때, 사용할 때, 아니면 다른 비슷한 library를 사용할 때 비슷한 문제를 인식했을 것 입니다.
문제? 여기서 말하는 문제는 어떤 문제들일까요?
Legacy React의 문제
React Hook이 나오기 전에 React는 크게 3가지의 문제가 있었습니다.
stateful 컴포넌트간 재사용의 어려움
React를 개발하다보면 "render props", "high order components"등의 패턴으로 컴포넌트간의 state를 주고 받아 개발을 하게 됩니다. 하지만 이 패턴은 코드를 이해하기 어렵게 만듭니다. React application dev tool을 켜보면 "wrapper hell"을 볼 수 있게 될 것 입니다. provider, consumer, higher-order components, render props 또는 그외 abstraction이 layer하는 모습을 볼 수 있습니다.
복잡한 컴포넌트는 이해하기 어렵다
컴포넌트가 커지면 많은 stateful logic이 추가되면서 이해하기 힘들어지고 유지보수하기 힘들어 집니다. 예를 들어서 componentDidMount와 componentDidUpdate 에 데이터를 fetch하는 logic A이 포함되어있고 event handler를 등록하고 해제하는 logic B가 componentDidMout와 componentWillUnmount에 포함되어 있다면 여기서 componentDidMount는 서로 관련이 없는 logic A와 logic B를 포함하게 됩니다. 컴포넌트가 더 복잡해진다면 더욱 이해하기 어려워질 것 입니다.
Class는 사람과 머신을 헷갈리게 한다
예를들어 클래스 컴포넌트를 사용하기 위해서는 this의 이해가 필요합니다. this 외에 props, state, top-down 데이터 흐름를 완벽하게 이해해야 합니다.
하지만
자료를 찾아보면 거의 모든 곳이 클래스 컴포너트 대신 함수형 컴포넌트를 사용하는 것을 장려하고 있습니다. 심지어 공식문서도 ...
대부분의 이야기를 정리하면 Hook을 사용하는 함수형 컴포넌트가 클래스 컴포넌트에 비해 가벼우며 유지보수에 편하다는 내용입니다. 하지만 진짜로 함수형 컴포넌트가 항상 옳은 것 일까요?
Hook의 장점은 컴포넌트간의 dependency를 끊어서 생긴 것으로 이루어져 있습니다. 하지만 애플리케이션의 규모가 커지면 커질수록 dependency를 가질 수 밖에 없는 구조가 만들어 질 것이며 이런 dependency를 잘 이용하는 디자인 패턴들이 많이 있습니다. 적재적소에 사용하는 것이 좋지 않을까요?
결론
거의 모든 의견이 함수형 컴포넌트를 사용하는 것으로 기울고 있습니다.
하지만 React를 처음 사용해보는 저는 위에 설명된 문제점을 한번도 겪어본 적이 없습니다. top-down data flow, lifecycle. 먼저 hook을 배우기 이전에 클래스 컴포넌트의 단점에 대해서 체감을 해보기 위해서 클래스 컴포넌트를 사용해보겠습니다.
Reference
