🗂️ React 삼형제 Hook: useState, useEffect, useNavigate

1️⃣ useState – 상태 관리

컴포넌트 안에서 데이터(상태)를 저장하고 업데이트할 수 있도록 도와주는 Hook
리액트는 데이터가 변하면 화면이 자동으로 바뀌는데, 그 변화를 감지하는 기본 단위가 바로 useState이다.

구조:

import { useState } from 'react';

const [state, setState] = useState(초기값);

상태값을 선언하고 setState()로 값을 변경하면 자동으로 컴포넌트가 리렌더링된다.

2️⃣ useEffect – 변화 반응

특정 값이 바뀔 때 자동으로 실행되는 함수를 정의
API 요청, 로컬스토리지 접근, 이벤트 등록 등 사이드 이펙트(side effect) 작업을 한다.

구조:

import { useEffect } from 'react';

useEffect(() => {
  // 실행할 코드
}, [의존성]);

컴포넌트가 마운트될 때 혹은 특정 값이 변경될 때 실행된다.

3️⃣ useNavigate – 페이지 이동

React Router에서 제공하는 Hook으로, 페이지 간 이동 담당
SPA(Single Page Application)에서 페이지를 새로고침 없이 전환할 수 있게 해준다.

구조:

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

const navigate = useNavigate();
navigate('/이동할/경로');

페이지 이동 시 사용하며, React Router v6 이상에서 사용 가능하다.

📌 정리

상태는 useState로 기억하고
변화는 useEffect로 감지하며
이동은 useNavigate로 실행한다.