[React] - Hook

리액트를 공부하면서 '훅'이라는 단어를 많이 들었는데, 훅에 대한 개념이 완전히 잡히지 않은 상태에서 계속 공부를 하니 이해가 안 되는 부분이 있어 개념을 짚고 넘어가려 한다.

리액트 Hook이란 함수형 컴포넌트에서 상태(state) 및 생애 주기(lifcycle) 기능 등을 사용할 수 있도록 도와주는 기능이다. React 16.8 버전에 새로 추가된 기능이며 리액트 클래스형 컴포넌트나 일반 리액트에서 이용 가능하던 코드를 함수형 컴포넌트에서도 가능하게 만들어주는 라이브러리이다.

❗️ 함수형 컴포넌트? 클래스형 컴포넌트?

리액트 컴포넌트는 크게 함수형 컴포넌트(Functional Component)와 클래스형 컴포넌트(Class Component)로 나뉜다.

• 함수형 컴포넌트

import React from 'react';

const FunctionalComponent = () => {
  return (
    <div>
      {/* 컴포넌트의 내용 */}
    </div>
  );
};

- 함수형 컴포넌트에서는 상태(state)를 관리할 수 없었다. 하지만 리액트 훅 중 하나인 useState를 사용하면 가능하다.
- 함수형 컴포넌트에서는 lifecycle 메서드를 사용할 수 없었다. 하지만 리액트 훅 중 하나인 useEffect를 사용하면 가능하다. 
- 주로 새로운 프로젝트를 생성할 때 사용된다.

• 클래스형 컴포넌트

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return (
      <div>
        {/* 컴포넌트의 내용 */}
      </div>
    );
  }
}

- 클래스형 컴포넌트에서는 this.state를 사용해 상태를 관리하고, this.setState() 메서드를 통해 상태를 업데이트한다.
- 클래스형 컴포넌트는 componentDidMount, componentDidUpdate, componentWillUnmount 등과 같은 lifecycle 메서드를 사용하여 컴포넌트의 생명 주기를 다룬다.
- 주로 lifecycle 메서드를 활용해야 하거나, 기존 코드 베이스가 클래스형 컴포넌트로 이루어져 있는 경우나 HOC 같은 기능을 활용해야 하는 경우 사용된다.

두 컴포넌트 간의 주요 차이는 상태 관리 및 lifecyle 메서드의 처리 방식이며, 최근에는 함수형 컴포넌트와 훅 사용이 권장되고 있다.

❗️ 자주 사용되는 Hook

• useState
  : 함수형 컴포넌트에서 state를 사용할 수 있게 해줌
  const [state, setState] = useState(initialState);

• useEffect
  : side effect를 수행하도록 함 (데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등)
  useEffect(() => { / 부수 효과 수행 / }, [dependencies]);

• useReducer
  : 복잡한 상태 로직을 관리할 때 useState 대신 사용 가능, 상태 업데이트 로직을 함수로 분리하여 관리
  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback
  : 콜백 함수를 메모이제이션하여 성능 최적화
  const memoizedCallback = useCallback(() => { / 콜백 함수 / }, [dependencies]);

• useMemo
  : 계산 비용이 높은 값을 메모이제이션하여 성능 최적화
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef
  : ref 객체를 생성하고, DOM 요소나 컴포넌트 인스턴스를 참조 가능
  const myRef = useRef(initialValue);

❗️ Hook 사용 규칙

• 훅은 최상위 레벨에서만 호출되어야 한다. (반복문, 조건문, 중첩된 함수 내에서는 호출 X)
• 훅은 함수형 컴포넌트 또는 커스텀 훅 내에서만 호출되어야 한다. (일반 js 함수나 클래스 메서드에서 호출 X)
• 훅은 컴포넌트 내에서 동일한 순서로 호출되어야 한다.
• 커스텀 훅을 만들 때 내부에서만 훅을 호출하고, 커스텀 훅을 사용하는 컴포넌트에서는 훅을 직접 호출하지 않아야 한다.