[React] React Hooks 정리

React에서 Hooks 는 함수형 컴포넌트에서 상태관리를 하기 위해 만들어진 도구이다.

상태관리로 웹페이지를 렌더링 시키는 React의 특징을 잘 살릴 수 있는 도구라고 생각하면 된다.

본 게시글에서는 자주 사용하는 Hook 들에 대해 알아보려고 한다.

 

1. useState

useState는 리액트에서 가장 기본이 되는 상태 관리 훅이다.
리액트는 컴포넌트의 상태(state)가 변경되면 가상 DOM을 통해 변경 사항을 감지하고, 필요한 부분만 다시 렌더링한다.
이때 우리가 직접 상태값을 만들고, 변경할 수 있도록 도와주는 도구가 바로 useState 훅이다.

 

useState 는 다음과 같이 사용된다.

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

 

• state : 현재 컴포넌트에서 관리하고 있는 상태 값
• setState : 상태를 업데이트하는 함수. 이 함수를 호출하면 상태가 변경되고, 해당 컴포넌트가 자동으로 리렌더링된다.
• initialValue : 상태의 초기값. 컴포넌트가 처음 렌더링될 때 한 번만 설정된다.

 

import React, { useState } from "react";

function Counter() {
  // count라는 상태 변수를 선언하고, 초기값을 0으로 설정
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>현재 카운트: {count}</h2>
      <button onClick={() => setCount(count + 1)}>+ 증가</button>
      <button onClick={() => setCount(count - 1)}>- 감소</button>
    </div>
  );
}

export default Counter;

버튼이 클릭 될때마다 setCount 함수가 실행된다. setCount 함수가 실행되면 count 상태값이 1씩 증가하거나 감소한다. 

이로 인해 useState 의 상태값들이 변경되어 현재 카운트가 증가/감소 하게 된다.

 

2. useNavigate

useNavigate는 다른 페이지로 이동하고 싶을 때 사용하는 훅이다.
리액트는 SPA(Single Page Application) 구조를 사용하기 때문에, 기본적으로 하나의 페이지 안에서 컴포넌트만 바뀌는 방식으로 동작한다.

하지만 특정 상황에서 사용자를 다른 경로(페이지)로 이동시켜야 할 때가 있다. 이때 useNavigate를 사용하면 쉽게 페이지 전환을 할 수 있다.

import { useNavigate } from "react-router-dom";

function Home() {
  const navigate = useNavigate();

  const goToAbout = () => {
    navigate("/about"); // '/about' 경로로 이동
  };

  return (
    <div>
      <h1>Home 페이지</h1>
      <button onClick={goToAbout}>About 페이지로 이동</button>
    </div>
  );
}

- navigate("/about") → /about 경로로 이동
- navigate(-1) → 브라우저 뒤로 가기
- navigate(1) → 브라우저 앞으로 가기

 

3. useRef

useRef는 상태(state) 관리가 필요하지 않은 값을 저장하거나 DOM 요소에 접근할 때 사용하는 훅이다.

리액트는 상태값이 변경될 때마다 컴포넌트를 리렌더링한다.
그런데 모든 값이 상태로 관리될 필요는 없다.
불필요한 상태값 관리와 리렌더링은 브라우저 성능에 영향을 주어 앱이 느려질 수 있다.

useRef는 이런 불필요한 리렌더링을 막아주고, 렌더링과 상관없이 값을 유지할 수 있도록 도와준다.

import React, { useRef, useEffect } from "react";

function InputFocus() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus(); // 페이지가 열리면 자동으로 포커스
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="여기에 입력하세요" />
      <button>제출</button>
    </div>
  );
}

export default InputFocus;

useRef 는 자바스크립트의 document.queryselector() 처럼 DOM 요소에 DOM 요소에 직접 접근할 수 있는 훅이다.

 

1. useRef()로 ref 생성

- inputRef라는 변수를 만들어 input 태그에 연결한다.

2. ref={inputRef}

- input 태그에 ref를 달아주면, inputRef.current로 해당 DOM 요소에 접근할 수 있다.

useEffect에서 포커스 설정

- 페이지가 처음 렌더링될 때 inputRef.current.focus()를 호출하여, 자동으로 input 창에 커서가 들어가게 한다.

> 이렇게 하면 버튼을 클릭하기 전에도 바로 입력이 가능해 UX가 개선된다.

 

4. useEffect

useState 를 사용하여 상태값이 변경될 때 컴포넌트가 리렌더링 되는데, useEffect는 이 리렌더링 될 때 특정 작업을 실행할 수 있게 도와주는 훅이다. 상태값(state)이 바뀌어 리렌더링될 때 추가로 하고 싶은 작업들을 넣으면 된다.

댓글 입력 → 상태값(replies) 변경 → 리렌더링 → useEffect 실행 → 백엔드 API 호출 같은 흐름 가능

import React, { useState, useEffect } from "react";

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("컴포넌트가 렌더링되었거나 count가 변경되었습니다.");
  }, [count]); // count가 변경될 때마다 실행

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

useEffect는 컴포넌트 렌더링 이후 실행할 추가 작업을 작성할 때 사용한다.
핵심은 의존성 배열(dependency array)에 따라 언제 실행할지 결정하는 것이다.

 

 

 

 // 1️. 빈 배열 [] → 컴포넌트가 처음 렌더링될 때만 실행
  useEffect(() => {
    console.log("컴포넌트가 처음 렌더링될 때 한 번만 실행됩니다.");
  }, []);

  // 2️. 특정 값이 들어간 배열 [count] → count가 변경될 때마다 실행
  useEffect(() => {
    console.log("count가 변경될 때마다 실행됩니다:", count);
  }, [count]);

  // 3. 배열 없이 → 렌더링될 때마다 매번 실행
  useEffect(() => {
    console.log("렌더링될 때마다 실행됩니다. count:", count, "name:", name);
  });

 

5. 커스텀 훅

개발하다보면, 중복되는 함수들을 만들 때가 종종 있다. 그 때는 커스텀 훅을 생성해서 다른 컴포넌트에서도 불러올 수 있게 만들 수 있다. 커스텀 훅은 개발하면서 자주 사용하는 로직이나 기능을 재사용 가능한 함수로 분리한 것이다.

보통 React의 내장 훅(useState, useEffect 등)을 조합해서 만들고, 이름은 항상 use로 시작해야 React가 훅 규칙을 인식할 수 있다.

아래는 윈도우 크기 감지 커스텀 훅을 만든 예시이다.

import { useState, useEffect } from "react";

function useWindowSize() {
  const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

  useEffect(() => {
    const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return size;
}

export default useWindowSize;

 

 

그리고 아래 코드는 위의 커스텀 훅을 실제로 컴포넌트에서 불러와 사용하는 예시 코드이다.

import React from "react";
import useWindowSize from "./useWindowSize"; // 커스텀 훅 불러오기

function Demo() {
  const { width, height } = useWindowSize(); // 컴포넌트에서 사용할 커스텀 훅의 속성 값

  return (
    <div>
      <p>윈도우 가로: {width}px</p>
      <p>윈도우 세로: {height}px</p>
    </div>
  );
}