[ React.08.hook ]

carrotsman·2023년 3월 23일

프론트엔드

목록 보기

33/34

React Hook

React Hook은 리액트 16.8 버전 이후 추가된 기능이며, 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 모음이다.

React의 컴포넌트 선언 방식은 함수형, 클래스형 2가지로 나뉜다. 사실상 클래스형 컴포넌트가 주를 이루었는데, 이는 클래스형이 React에서 제공하는 LifeCycle 함수라던지, state 활용 등 컴포넌트 구조화에 용이하기 때문이다. 하지만 클래스형 컴포넌트가 갖는 단점을 극복하고자 함수형 컴포넌트 사용을 적극 권장했고, 클래스형 컴포넌트에서만 사용가능했던 기능을 제공하기 위해 v16.8 부터 React hook을 통해 기능을 제공한다.

👽 React hook은 함수형 컴포넌트를 위한 추가 셋이다.

🤮 Class형 컴포넌트의 단점

클래스 문법이 어렵다. 클래스 개념이라던지, this 바인딩에 대한 이해를 필요로 한다.
컴포넌트 사이에서 상태 로직 재사용의 어렵다. 컴포넌트의 경량화가 어렵다. 한마디로 확장성이 떨어진다.
기존 함수형 컴포넌트와 달리 기능의 추가, 적용이 어렵다.

😬 함수형 컴포넌트의 한계

사실상 애초에 함수형으로 구현해도 내부적으로 잘 구성하면 될 것 같은데 왜 굳이 hook을 사용하여 구현해야 할까? 이는 함수와 class 간 자바스크립트 차이 때문이다.

먼저 최초 렌더 이후 컴포넌트 값의 변경으로 리렌더링이 될때, 함수형 컴포넌트는 내부에 작성된 코드가 다시 실행된다. 이는 함수형 컴포넌트들이 기존에 가지고 있던 상태(state)를 전혀 관리할 수 없게 만든다. 상태관리에 있어서 적합한 모델이 아니라는 얘기다. 그래서 함수형 컴포넌트를 Stateless Component 라고 불리는 것이다.
반면 클래스형 컴포넌트 내 메소드는 속성의 개념이므로, 리렌더링이 되더라도 render() 를 제외한 나머지 메소드와 state가 유지된다. 따라서 데이터에 대한 관리가 용이하고, 불필요한 리소스 사용을 줄일 수 있다.

👍 이러한 함수형 컴포넌트의 한계를 극복하기 위해 React hook이 개발된 것이다. hook을 통해 상태관리, 컴포넌트 최적화 등 함수형 컴포넌트가 가진 단점을 극복할 수 있다.

React Hook 규칙

Hook에는 규칙이 있다. 이를 꼭 지켜야 정상적으로 hook이 실행되고 코드가 꼬이지 않는다.
eslint-plugin-react-hooks (ESLint 플러그인) 을 사용한다면 아래 두 규칙을 강제한다. (CRA에 포함)

1. 최상위(at the Top Level)에서만 Hook을 호출

컴포넌트 최상위에서만 Hook을 호출해야 한다.
반복문, 조건문, 중첩된 함수등에서 호출하면 안된다.

2. 오직 React 함수 내에서 Hook을 호출

일반적인 Javascript 함수내에서는 호출하면 안된다.

React Hook 주의사항

Hook은 브라우저의 메모리 자원을 사용하기에 함부로 남발하면 오히려 성능저하를 불러올 수있다. 불필요한 호출을 줄이고, 적시적소에 사용하는 것이 바람직하다.

React Hook 종류

기본 Hook

useState
함수형 컴포넌트에서 state를 사용할 수 있게 해준다.
```
const [count ,setCount] = useState(0);
```
useEffect
클래스형 컴포넌트의 생명주기 함수를 포괄하는 hook이다. 다음 글을 참고
👉 [ React.06.LifeCycle 함수 - 함수형 Component ]
```
useEffect(() => {
   document.title = 'ㅎㅇ';
});
```
useContext
자식 컴포넌트에서 부모 컴포넌트에서 전달된 컨텍스트 데이터사용시 Consumer 컴포넌트를 사용하지 않고 쓸수 있다.
```
import React, { createContext } from 'react';
export const UserContext = createContext();
```