승미
개발을 하다보면 중복된 코드들을 쉽게 만날 수 있습니다. 그러나 React는 컴포넌트끼리의 로직 재사용이 가능한 방법을 제공하지 않았습니다. 컴포넌트의 재사용성을 위해 Render props, 고차 컴포넌트(HOC, Higher Order Component)와 같은 패턴을 사용해서 이와 같은 문제를 해결했습니다. 하지만 이런 패턴의 사용은 providers, consumers, 고차 컴포넌트, render props 그리고 다른 추상화에 대한 레이어로 둘러싸인 “래퍼 지옥(wrapper hell)“을 볼 가능성이 높습니다.
React는 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요했습니다.
Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능합니다. Hook은 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다. 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어줍니다.
우리는 자신만의 Hook을 구축하는 법에 대해 좀 더 알아볼 것입니다.
정연
- Hook은 Class 없이 리액트 기능 구현을 가능하게 만듭니다.
클래스 컴포넌트는 함수 컴포넌트 보다 많은 기능을 가지고 있지만 코드가 길고 복잡합니다. 예를 들면 클래스는 this 키워드와 깊이 연관되어 있습니다. this 키워드의 작동방식을 알지 못하면 예상치 못한 오류가 발생하고 이는 클래스 컴포넌트에 복잡성을 증가시킵니다. 또한 클래스 컴포넌트는 최적화 속도에 약점을 가지고 있습니다. 리액트 개발진이 Prepack을 사용한 컴포넌트 folding을 실험한 결과, 클래스 컴포넌트가 최적화 경로의 속도를 더 느리게 만든다는 것을 발견했습니다.
이와 같은 클래스형 컴포넌트의 문제를 해결하기 위해 함수형 컴포넌트를 활용해야 합니다. Hook이 나오기 이전에는 state와 생명주기 기능을 사용할 수 없다는 이유로 함수형 컴포넌트가 많이 쓰이지 못했지만 Hook의 등장 이후 useState와 useEffect로 클래스형 컴포넌트에서만 가능했던 작업을 함수형 컴포넌트에서도 가능하게 해주었습니다. 또한 리액트 컴포넌트는 개념적으로 함수에 가깝습니다. 함수를 지향하는 리액트 정신을 잇는 데에도 Hook의 사용이 권장됩니다.
민지
- 복잡한 컴포넌트로 인한 라이프 사이클(생명주기) 유지보수의 어려움
클래스 컴포넌트보다는 Hook을 활용한 함수 컴포넌트가 많이 쓰이고 있는 만큼 리액트 Hook을 활용하여 라이프 사이클을 구현하는 것이 핵심이다.
클래스 컴포넌트의 라이프 사이클은 보통 페이지의 렌더링 준비 과정에서 시작하여 페이지를 업데이트하고 페이지에서 사라질 때 끝나게 됩니다. 이를 초기화(Initialize) - 생성(Mounting) - 변경(Props change, State Change) - 소멸(Unmounting)의 4단계로 표현할 수 있습니다.
컴포넌트가 생성되고 사용된 후 소멸되는 과정에서 라이프 사이클 이벤트가 발생하게 되는데 해당 라이프 사이클이 발생했을 때 비동기적으로 사용자의 입력을 화면에 렌더링하거나 웹 서버와 통신하여 데이터를 조회하는 등의 업무를 처리할 수 있습니다.
하지만 컴포넌트의 구조가 복잡해질 경우 라이프 사이클의 구조 또한 파악하기 어려워지기 때문에 유지보수가 어려워집니다. 또한 React는 컴포넌트 간 상태를 저장하고 공유할 수 있는 방법을 제공하지 않습니다. 상태 관련 로직을 따로 관리하기 위해 컴포넌트로 작게 분리하는 것은 거의 불가능하며 테스트하기도 어렵습니다. 이를 별도의 상태 관리 라이브러리와 함께 결합하여 보완할 수 있으나 Hook을 사용하면 구조의 변화 없이 각각의 컴포넌트 내에서 State를 관리하고 변경할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능하고 React에 좀 더 직관적인 API를 제공할 수 있습니다.
이 때문에 많은 사용자들은 React를 별도의 상태 관리 라이브러리와 함께 결합해서 사용해왔으나, 상태 관리 라이브러리는 종종 너무 많은 추상화를 하고, 서로 다른 파일들 사이에서 건너뛰기를 요구하며 컴포넌트 재사용을 더욱더 어렵게 만들었습니다.
상태관련 로직이 모두 한 곳에 묶여있기 때문에 상태 로직의 재사용이 불가능
이 때 Hook을 사용하면 구조의 변화 없이 각각의 컴포넌트 내에서 State를 관리하고 변경할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능하고 React에 좀 더 직관적인 API를 제공할 수 있습니다.
Hook을 이용하여 함수 컴포넌트에서도 상태 관리(state)와 기능(라이프 사이클 이벤트 등)을 사용할 수 있어서 특정 기능은 클래스 컴포넌트로, 화면 출력은 함수 컴포넌트로 구분하던 것을 함수 컴포넌트만으로 기능과 화면을 모두 제공할 수 있기 때문이다.
간략하게 Hook을 살펴보자면, useState, useReducer로 상태(State)를 관리하고 useEffect로 componentDidMount, componentDidUpdate와 같은 클래스 컴포넌트의 라이프 사이클 이벤트를 제공할 수 있습니다. 또한, 특정 조건에서 렌더링 최적화를 위한 useMemo, useCallback과 특정 컴포넌트를 참조하는 useRef 등 다양한 Hook API를 사용하여