2026-01-22

useState

useState란?

컴포넌트에 상태(state) 를 추가하고,

해당 상태가 변경되면 컴포넌트를 다시 렌더링하게 만드는 React Hook

• 함수 컴포넌트에서 상태 관리 가능
• 상태 변경 → 자동 재렌더링
• UI와 데이터 상태를 동기화

기본 문법

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

• state : 현재 상태 값
• setState : 상태를 변경하는 함수
• initialState : 초기 상태 값 (첫 렌더링에만 사용)

useState 동작 원리

1. setState 호출
2. React가 상태 변경을 감지
3. 컴포넌트 함수 재실행
4. 변경된 state 기준으로 JSX 재계산
5. 실제 DOM 변경 (diff 적용)

⇒ state 변경 = 컴포넌트 재렌더링

useState 특징

• state는 컴포넌트별로 독립적
• state 변경 시 비동기적으로 처리됨
• state를 직접 수정하면 안 됨 (불변성 유지)
  • 왜 상태를 직접 수정하면 안 되나?
    • React는 상태 값의 변경 여부를 참조(reference) 변화로 판단
    • 상태를 직접 수정하면 참조가 바뀌지 않아 React가 변경을 감지하지 못하고
    • 그 결과 렌더링이 발생하지 않기 때문에 불변성을 지켜야 함

// 잘못된 예
state.count++;

// 올바른 예
setCount(count +1);

초기값 설정 방식

1. 일반 초기화

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

2. 함수형 초기화 (lazy initialization)

const [value, setValue] =useState(() => {
returnheavyCalculation();
});

• 초기 렌더링 시에만 실행
• 렌더링마다 실행되지 않음
• 계산 비용이 큰 경우 사용

상태 업데이트 방식

1. 값 직접 전달

setCount(count +1);

2. 함수형 업데이트

setCount(prev => prev +1);

• 왜 함수형 업데이트를 쓰는가?

    setCount(count +1);
    setCount(count +1);
  

  기대: +2

  실제: +1 (같은 state 기준으로 처리됨)

    setCount(prev => prev +1);
    setCount(prev => prev +1);
  

  결과: +2

  • setState는 비동기 & 배치 처리
  • 최신 상태를 보장하려면 이전 값을 인자로 받는 방식 사용

객체 / 배열 상태 관리 (불변성)

React는 참조(reference) 변경으로 상태 변경을 판단

→ 기존 객체/배열을 직접 수정하면 렌더링 안 됨

객체

setUser(prev => ({
  ...prev,
age: prev.age +1
}));

배열

setList(prev => [...prev, newItem]);

useState와 렌더링 관계

• state 변경 → 컴포넌트 재실행
• 렌더링 중 setState 호출 X (무한 루프 위험)
• 이벤트 핸들러 / useEffect 안에서 사용

// 렌더링 중 호출 X
setCount(1);

useState와 useEffect의 관계

useState로 상태가 변경되면 렌더링이 발생하고, 그 이후 useEffect가 실행되어 상태 변화에 따른 부수 효과를 처리합니다.

useState 변경
→ 컴포넌트 재렌더링
→ DOM 업데이트
→ useEffect 실행

• useState
  • 상태 관리
  • 상태 변경 시 렌더링 트리거
• useEffect
  • 렌더링 이후의 부수 효과 처리
  • 상태/props 변경에 반응

상태가 최신 값이 아닌 문제 해결 방법

useCallback을 사용할 때 함수는 생성 시점의 state를 클로저로 기억하기 때문에,

의존성 관리가 잘못되면 최신 상태를 참조하지 못하는 문제 발생 가능

해결방법

• 의존성 배열에 state 추가 (정석)

    const onClick =useCallback(() => {
    console.log(count);
    }, [count]);
  

  → state가 변경될 때마다 함수가 다시 생성되어 항상 최신 값 사용

• 함수형 업데이트 사용 (권장)

    setCount(prev => prev +1);
  

  → 이전 상태를 기반으로 업데이트하여 비동기·배치 처리 상황에서도 안전

• useRef로 최신 값 참조 (고급)

    const countRef =useRef(count);
    countRef.current = count;
  

  → 함수 재생성 없이도 항상 최신 state 접근 가능

요약

useState는 컴포넌트의 상태를 관리하고, 상태 변경을 통해 UI를 자동으로 다시 렌더링하게 하는 Hook이다.

참고자료

• https://ko.react.dev/reference/react/useState
• https://velog.io/@hjthgus777/%EB%8B%A4%EC%8B%9C-%ED%95%9C%EB%B2%88-useState-%EB%A5%BC-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90
• https://velog.io/@userhwseo/%EB%A9%B4%EC%A0%91%EC%9D%84-%ED%86%B5%ED%95%9C-%EB%B0%B0%EC%9B%80-useState-useCallBack