[React] React Hooks

 

 

 

 

 

React Hooks

 

Hook 이란?

 

함수형 컴포넌트에서 state와 라이플사이클 메소드를 연동할 수 있게 해주는 함수이다.

React v16.8 부터 도입된 새로운 기술으로, 함수형 컴포넌트에서 상태 관리를 포함한 다양한 기능을 제공하여

개발자들이 다양한 프로덕트들을 작업할 수 있도록 도와준다.

 

 

 

Hook을 도입한 이유

 

Hook은 개발자들이 React로 컴포넌트를 작성하고 유지하는 동안 당면한 문제들을 해결하기 위해 도입되었다

Hook이 도입되기 전에는..

 

 

📍 컴포넌트들 사이에서 상태 로직을 재사용하기 어려웠다.

 

Hook을 사용하면 컴포넌트로부터 상태 로지을 추상화할 수 있고 이를 이용해서 계층의 변화 없이 독립적인 테스트와 재사용이 가능하다.

 

 

📍 복잡한 컴포넌트들을 이해하기 어려웠다.

 

관리하기 힘든 상태 로직과 사이드 이펙트가 포함되어 있는 컴포넌트를 유지보수할 때,

상호 관련 코드는 분리하고 관련 없는 코드는 단일 메소드로 결합하는 과정에서 버그가 쉽게 발생하게 되었다.

또한 상태 로직은 한 공간 안에 묶여 있기 때문에 이런 컴포넌트들을 작게 분리하는 것은 불가능했으며 테스트하기도 어려웠고,

이 때문에 상태 관리를 별도의 라이브러리와 결합해서 사용하는 과정에서 컴포넌트 재사용을 더욱 어렵게 만들었다.

이러한 문제를 해결하기 위해 라이프사이클 메소드를 기반으로 분리하는 것보다,

Hook을 통해 서로 비슷한 기능을 하는 함수를 묶어서 컴포넌트를 나누는 방법을 고안하게 되었다.

 

 

📍 Class 사용을 위한 this 키워드의 작동 방법은 혼란스러웠다.

 

React에서 Class를 사용하기 위해서는 Javascript의 this 키워드가 어떻게 작동하는지 알아야 했는데,

다른 언어에서와는 다르게 작동하기 때문에 큰 혼란을 야기하였다.

이러한 문제를 해결하기 위해 Hook은 Class 없이도 React 기능을 사용할 수 있는 방법을 제시하고 있다.

 

 

 

Hook 특징

 

📍 선택적으로 사용

 

기존의 코드를 다시 작성할 필요 없이 컴포넌트 안에서 Hook을 사용할 수 있다.

Hook을 사용할 필요가 없으면, 사용하지 않으면 된다.

 

 

📍 이전 버전과의 완벽한 호환성

 

Hook이 도입되기 이전의 버전들과 100% 호환한다.

 

 

📍 Hook 사용 규칙

 

Hook은 **최상위(at the top level)**에서만 호출해야 한다.

반복문, 조건문, 중첩된 함수 내에서 Hook을 호출해서는 안 된다.

 

Hook은 함수형 컴포넌트 내에서만 호출해야 하며, 일반적인 Javascript 함수에서 Hook을 호출해서는 안 된다.

(단, 자신이 만든 커스텀 Hook 내에서는 사용할 수 있다.)

 

 

 

Hook API

 

📍 기본 Hook

 

useState → 상태 유지 값과 그 값을 갱신하는 함수 반환

useEffect → 명령형 또는 effect를 발생시키는 함수를 인자로 받으며, 렌더링 완료 후 함수 실행

useContext → React.createContext로부터 반환된 context 객체를 받아서 그 context의 현재 값 반환

 

 

📍 추가 Hook

 

useReducer → reducer를 받아서 dispatch 메소드와 짝의 형태로 현재 state 반환

useCallback → 메모이제이션 콜백 반환

useMemo → 메모이제이션 값 반환

useRef → .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체 반환

useImperativeHandle → ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화

useLayoutEffect → useEffect와 동일하나, 모든 DOM 변경 후에 동기적으로 발생

useDebugValue → React 개발자도구에서 사용자 Hook 레이블을 표시하는 데에 사용