- 클래스 컴포넌트 / 함수 컴포넌트
- 리액트 / React 표기 정하기
1.3 Hook을 사용하는 이유
Hook이 나오기 전까지는 클래스 컴포넌트가 더 많이 사용되었는데 그 이유는 함수 컴포넌트에서는 상태(State) 관리와 생명주기(Lifecycle) API를 사용할 수 없었기 때문입니다. 하지만 클래스 컴포넌트는 컴포넌트 간 상태 로직의 재사용 및 구조 파악이 어렵고, 코드가 복잡하다는 단점이 있습니다.
이 단점들을 보완하고자 Hook이 탄생했으며, Hook은 3가지 장점을 가지고 있습니다.
첫 번째, Hook을 통해 컴포넌트 간 상태를 저장하고 공유할 수 있습니다. 두 번째, Hook은 구조를 이해하기 쉽습니다. 세 번째, Hook은 클래스 컴포넌트 없이 리액트를 사용 가능하게 만듭니다. React에서는 이와 같은 장점을 이유로 Hook을 사용하는 것을 권장하며, 지금부터 3가지 장점을 중심으로 훅의 사용 동기를 이야기해보겠습니다.
첫 번째, Hook을 통해 컴포넌트 간 상태를 저장하고 공유할 수 있습니다.
개발을 하다보면 컴포넌트 간 중복된 코드들을 쉽게 만날 수 있습니다. 그러나 React는 컴포넌트 간 로직이 재사용 될 수 있는 방법을 제공하지 않았습니다. 이에 컴포넌트의 재사용성을 위해 Render props, 고차 컴포넌트(HOC, Higher Order Component)와 같은 패턴을 사용해서 이와 같은 문제를 해결했습니다. 하지만 이러한 패턴들을 사용하면 코드를 추적하기 어렵게되고, 여러 패턴들이 만나 발생되는 래퍼 지옥(wrapper hell)을 피할 수 없었습니다. Hook이 탄생하면서 이러한 문제는 Custom Hook을 통해 해결할 수 있게 되었고, 함수 컴포넌트에서도 컴포넌트 간 상태를 저장하고 공유 및 테스트가 가능하게 되었습니다.
두 번째, Hook은 구조를 이해하기 쉽습니다.
컴포넌트의 구조가 복잡할 경우, 라이프 사이클(Lifecycle)의 구조 또한 파악하기 힘들기 때문에 유지 보수가 어려워집니다. 또한 React는 컴포넌트 간 상태를 저장하고 공유할 수 없으므로 상태 관련 로직을 따로 관리하고자 컴포넌트로 작게 분리하는 것은 거의 불가능하며 테스트하기도 어렵습니다. 이를 별도의 상태 관리 라이브러리와 함께 결합하여 보완할 수 있으나 Hook을 사용하면 구조의 변화 없이 각각의 컴포넌트 내에서 상태(State)를 관리하고 변경할 수 있기 때문에 React에 좀 더 직관적인 API를 제공할 수 있습니다.
클래스 컴포넌트의 라이프 사이클
보통 페이지의 렌더링 준비 과정에서 시작하여 페이지를 업데이트하고 페이지에서 사라질 때 끝나게 됩니다. 이를 초기화(Initialize) - 생성(Mounting) - 변경(Props change, State Change) - 소멸(Unmounting)의 4단계로 표현할 수 있습니다.
컴포넌트가 생성되고 사용된 후 소멸되는 과정에서 라이프 사이클 이벤트가 발생하게 되는데 해당 라이프 사이클이 발생했을 때 비동기적으로 사용자의 입력을 화면에 렌더링하거나 웹 서버와 통신하여 데이터를 조회하는 등의 업무를 처리할 수 있습니다.
→ Hook을 이용하면 함수 컴포넌트에서도 상태 관리(state)와 React의 기능(라이프 사이클 이벤트 등)을 사용할 수 있습니다.
세 번째, Hook은 클래스 컴포넌트 없이 리액트를 사용 가능하게 만듭니다.
클래스 컴포넌트는 함수 컴포넌트 보다 많은 기능을 가지고 있지만 코드가 길고 복잡합니다. 예를 들면 클래스는 this 키워드의 작동방식을 제대로 이해하지 못해 예상치 못한 오류를 만나곤 합니다. this는 조작 및 변경이 가능하기 때문에 오류를 수정할 때도 함수형 컴포넌트와 달리 길고 복잡한 코드를 작성해야 합니다. 또한 클래스 컴포넌트는 페이지 생성 속도가 느립니다. Prepack 컴파일러를 활용해 컴포넌트 folding을 실험한 결과, 클래스 컴포넌트가 컴포넌트 folding 속도를 느리게 만든다는 것을 발견했습니다.
이와 같은 클래스 컴포넌트의 문제를 해결하기 위해 함수 컴포넌트를 사용해야 합니다. Hook은 리액트에서 함수 컴포넌트를 보편적으로 사용할 수 있게 만드는 도구입니다. Hook이 나오기 전에는 state와 생명주기 기능을 사용할 수 없다는 이유로 함수 컴포넌트가 많이 쓰이지 못했지만 Hook의 등장 이후 함수 컴포넌트가 적극적으로 활용되었습니다. 화살표 함수를 사용하여 this를 바인딩하지 않아 코드의 간결함을 유지할 수 있고 깊은 컴포넌트 트리 중첩이 일어나지 않아 속도도 빨라졌습니다. 마지막으로 개념적 의미에서 리액트 컴포넌트는 함수에 가깝습니다. 함수를 지향하는 리액트 정신을 잇기 위해서도 Hook의 사용이 권장됩니다.