Hook

Hook은 React 16.8 버전에 추가된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 메서드 기능을 사용할 수 있게 해주는 함수입니다. 이전에는 클래스형 컴포넌트에서만 상태와 라이프사이클을 사용할 수 있었지만, Hook의 등장으로 함수형 컴포넌트에서도 이러한 기능을 활용할 수 있게 되었습니다.

주요 Hook 종류와 설명

1. useState:
   • 컴포넌트 내에서 상태를 관리할 수 있게 해주는 Hook입니다.
   • useState는 상태 변수와 상태를 갱신하는 함수 두 가지를 반환합니다.

   import React, { useState } from 'react';
   
   function Counter() {
     const [count, setCount] = useState(0);
   
     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>Click me</button>
       </div>
     );
   }

2. useEffect:
   • 컴포넌트가 렌더링될 때와 업데이트될 때 실행되는 사이드 이펙트(부수 효과)를 처리할 수 있게 해주는 Hook입니다.
   • 데이터 가져오기, 구독 설정, DOM 업데이트 등의 작업을 처리할 때 사용됩니다.

   import React, { useState, useEffect } from 'react';
   
   function Timer() {
     const [count, setCount] = useState(0);
   
     useEffect(() => {
       const interval = setInterval(() => setCount((c) => c + 1), 1000);
       return () => clearInterval(interval); // 컴포넌트가 언마운트될 때 정리(cleanup)
     }, []);
   
     return <p>Timer: {count}</p>;
   }

3. useContext:
   • Context API를 사용하여 컴포넌트 간의 데이터를 쉽게 공유할 수 있게 해주는 Hook입니다.
   • 전역 상태 관리에서 자주 사용됩니다.

   import React, { useContext } from 'react';
   
   const UserContext = React.createContext();
   
   function DisplayUserName() {
     const user = useContext(UserContext);
     return <p>Welcome, {user.name}!</p>;
   }

4. useReducer:
   • 복잡한 상태 관리 로직을 관리할 때 useState 대신 사용할 수 있는 Hook입니다.
   • 리듀서를 통해 상태를 갱신하고, Redux의 리듀서와 유사한 방식으로 상태를 업데이트할 수 있습니다.

   import React, { useReducer } from 'react';
   
   const initialState = { count: 0 };
   
   function reducer(state, action) {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   
   function Counter() {
     const [state, dispatch] = useReducer(reducer, initialState);
     return (
       <div>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>+</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
       </div>
     );
   }

5. useRef:
   • DOM 요소나 상태를 보관하는 용도로 사용되며, 리렌더링 없이 값을 저장할 수 있습니다.
   • 주로 DOM 요소에 접근할 때 사용되며, setTimeout이나 setInterval 같은 타이머를 관리할 때도 유용합니다.

   import React, { useRef } from 'react';
   
   function FocusInput() {
     const inputRef = useRef(null);
   
     const focusInput = () => {
       inputRef.current.focus();
     };
   
     return (
       <div>
         <input ref={inputRef} type="text" />
         <button onClick={focusInput}>Focus the input</button>
       </div>
     );
   }

Custom Hook

React에서는 개발자가 필요에 맞게 Custom Hook을 만들 수 있습니다. Custom Hook은 use로 시작하는 함수로, 여러 Hook 로직을 캡슐화하여 재사용할 수 있게 합니다.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// Custom Hook 사용
function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  return <div>Data: {JSON.stringify(data)}</div>;
}

Hook의 규칙

1. Hook은 최상위 레벨에서만 호출해야 합니다. 조건문이나 반복문 안에서 호출하면 안 됩니다.
2. React 함수형 컴포넌트 또는 Custom Hook 내부에서만 호출해야 합니다. 클래스형 컴포넌트나 일반 함수에서는 사용할 수 없습니다.

요약

Hook은 함수형 컴포넌트에서 상태와 부수 효과를 관리할 수 있는 강력한 도구로, 더 간결하고 재사용 가능한 컴포넌트를 작성하는 데 도움을 줍니다. useState, useEffect, useContext와 같은 내장 Hook 외에도, 개발자들은 Custom Hook을 만들어 복잡한 로직을 효율적으로 관리할 수 있습니다.