React Hooks는 기능적 구성요소의 React 상태 및 수명주기 기능을 "연결"할 수 있게 해주는 함수입니다. React 16.8에 도입된 Hooks를 사용하면 클래스 구성 요소를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있습니다.

Hooks의 핵심 개념을 분석해 보겠습니다.

1. 왜 React Hooks인가요?

후크 이전에는 상태 저장 논리를 클래스 구성 요소에서만 구현할 수 있었습니다. 기능적 구성요소는 상태 비저장(stateless)이어서 다양성이 떨어집니다. 후크는 다음 대상에 도입되었습니다:

• 기능적 구성 요소에서 상태 저장 논리를 허용합니다.
• 구성요소 간에 상태 저장 논리를 쉽게 공유합니다.
• 상용구 코드(예: 클래스 구성 요소의 수명 주기 메서드)를 사용하지 마세요.
• 구성요소 재사용 및 모듈성을 향상합니다.

2. Hook의 기본 규칙

후크를 사용할 때 따라야 할 두 가지 주요 규칙이 있습니다.

• 최상위 수준에서만 후크를 호출하세요. 후크는 루프, 조건 또는 중첩 함수 내부가 아닌 함수 상단에서 호출해야 합니다. 이렇게 하면 React가 구성 요소가 렌더링될 때마다 동일한 순서로 Hooks를 호출하게 됩니다.
• React 함수에서만 Hooks 호출: 기능적 구성 요소나 사용자 정의 Hooks에서는 Hooks를 사용할 수 있지만 일반 JavaScript 함수에서는 사용할 수 없습니다.

3. 내장 React Hooks

React에 내장된 주요 후크 중 일부를 살펴보겠습니다.

사용상태
useState를 사용하면 기능적 구성 요소에 상태를 추가할 수 있습니다.

통사론:

const [state, setState] = useState(initialState);

• 상태: 현재 상태 값입니다.
• setState: 상태를 업데이트할 수 있는 함수입니다.
• initialState: 상태의 초기 값입니다.

효과 사용
useEffect는 기능적 구성 요소의 부작용을 처리하는 데 사용되는 후크입니다. 여기에는 데이터 가져오기, 구독 또는 DOM과의 직접 상호작용이 포함될 수 있습니다.

통사론:

useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

• 첫 번째 인수는 부작용 논리를 배치하는 함수입니다.
• 두 번째 인수는 선택적 종속성 배열입니다. 이러한 종속성이 변경되면 효과가 다시 실행됩니다.

4. 기타 유용한 후크

useMemo: 계산된 값을 메모하여 렌더링할 때마다 다시 계산하지 않도록 합니다.
useCallback: 함수를 렌더링할 때마다 다시 생성되지 않도록 함수를 메모합니다.
useLayoutEffect: useEffect와 유사하지만 모든 DOM 변형 후에 동기적으로 실행됩니다.

후크의 장점

• 클리너 코드: 후크를 사용하면 구성요소를 더 쉽게 읽고 이해할 수 있습니다.
• 재사용성: 후크를 사용하면 HOC나 렌더링 소품 없이 구성 요소 간에 논리를 공유할 수 있습니다.
• 더 나은 상태 관리: 상태 및 부작용을 더욱 세부적으로 제어합니다.
• 기능적 구성 요소의 장점: React 구성 요소에서 기능적 프로그래밍을 최대한 활용할 수 있습니다.

Hooks는 클래스 기반 구성 요소에서 벗어나 상태 관리 및 부작용에 대한 보다 기능적이고 간결하며 재사용 가능한 접근 방식으로 전환하여 React 구성 요소를 작성하는 방식에 혁명을 일으켰습니다.