React 훅(Hook) 이란..?

 

오늘은 리액트 훅에 대해서 포스팅해 보겠습니다.

React에서 훅은 함수형 컴포넌트에서 상태(state)와 생명주기 기능을 사용할 수 있도록 해주는 기능입니다.

 

원래 React에서는 클래스 컴포넌트에서만 상태 관리와 생명주기 메서드를 사용할 수 있었지만,

React 16.8부터 useStatue, useEffect 같은 훅을 사용하여 함수형 컴포넌트에서도 이를 활용 가능 하게 되었습니다.

 

📌 1️⃣ React Hook의 종류

React Hook은 크게 기본 훅, 추가 훅, 그리고 커스텀 훅으로 나뉩니다.

기본 훅

useState : 컴포넌트 상태 관리(state)

useEffect : 컴포넌트 생명주기 관리(side effects, API 요청 등)

useContext : 전역 상태 관리 (React Context API 활용)

 

추가 훅

useReducer : 복잡한 상태 로직을 관리

useRef : DOM 요소 또는 값 유지 

useMemo : 렌더링 성능 최적화

useCallback : 이벤트 핸들러 최적화

useLayoutEffect : useEffect와 유사하지만 렌더링 직후 동기적으로 실행

useImperativeHandle : 컴포넌트의 인스턴스를 직접조작

 

커스텀 훅 : 여러 훅을 조합하여 반복되는 로직을 재사용할 수 있음

 

주로 사용하는 대표적인  React Hook 3가지 설명 및 사용법을 적어보겠습니다.

 

📌 2️⃣ 기본 React Hook 상세 설명 및 사용법

 

 1️⃣. useState - 상태(state) 관리

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0); // <== 초기값
  return (
    <div>
      <p>버튼을 몇번 눌렀을까요? {count}</p>
      <button onClick={() => setCount(count + 1)}>+1 증가 ~ </button>
    </div>
  );
};

export default Counter;

 

useState(초기값)을 사용하여 상태를 정의

버튼을 눌러 setCount를 호출하면 컴포넌트가 다시 렌더링 됩니다.

 

✅ 2. useEffect - 상태(state) 관리 (저번 포스팅에서 axios를 사용하여 API 요청법을 포스팅했으므로 융합해서 써볼게요)

 

 1️⃣. useEffect + axios 기본 예제 

import { useEffect } from "react";
import axios from "axios";

const FetchData = () => {
  useEffect(() => {

    const fetchData = async () => {
      try {
        const response = await axios.get("https://요청주소기입하세요/test");
        console.log("API 데이터:", response.data);
      } catch (error) {
        console.error("API 요청 중 오류 발생:", error);
      }
    };

    fetchData();
  }, []); 

  return <h2>콘솔에서 데이터를 확인하세요!</h2>;
};

export default FetchData;

 

설명

1.useEffect(() => {...}, [])

컴포넌트가 처음 렌더링될 때 API를 한 번만 요청하도록 설정합니다.

 

✅ 3. useContext - 전역 상태 관리

 

import { createContext, useContext } from "react";

// 1️⃣ 컨텍스트 생성
const ThemeContext = createContext("light");

const ThemeComponent = () => {
  // 2️⃣ 컨텍스트 값 가져오기
  const theme = useContext(ThemeContext);
  return <p>현재 테마: {theme}</p>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeComponent />
    </ThemeContext.Provider>
  );
};

useContext는 React의 Context API를 사용하여 전역적으로 상태를 공유할 때 유용합니다.(ex. 다크모드)

코드 설명은 ThemeContext.Provider로 value를 설정하고 하위 컴포넌트에서 useContext로 가져올 수 있음.

 

🔥 최종 정리

훅	설명
useState	컴포넌트 내부 상태 관리
useEffect	생명주기 관리, API 요청, 이벤트 핸들링
useContext	전역 상태 관리(Context API)
useReducer	복잡한 상태 로직 관리
useRef	DOM 요소 참조, 렌더링과 무관한 값 유지