✅ React `useState`의 `setState` 함수 총정리

윤상혁·2025년 4월 18일

React

목록 보기
3/3

물론이지! 아래는 요청한 대로 기존 정리에
📌 상태 변수 이름 앞에 set을 붙이는 네이밍 규칙 설명까지 포함해서 최종 정리본으로 업데이트했어 👇


✅ React useStatesetState 함수 총정리 (네이밍 규칙 포함)


1. 📌 useState란?

컴포넌트 내부에서 상태(state)를 만들고,
그 상태를 변경할 수 있는 함수(setState)를 함께 반환하는 React의 Hook

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

2. ✅ setState는 어떤 함수인가?

특징설명
자동 생성됨useState를 호출하면 React가 자동으로 만들어줌
네가 직접 정의하지 않음function setState() { ... } 이런 식으로 만들지 않음
상태를 바꾸는 역할setState("newValue") → 상태가 바뀌고 컴포넌트가 리렌더링 됨

3. 🔤 함수 네이밍 규칙 (setState는 어떻게 이름 지어야 할까?)

  • useState로 상태를 선언할 때,
    첫 번째 값(state)은 상태 변수,
    두 번째 값(setState)은 상태 변경 함수다.
const [count, setCount] = useState(0);
const [user, setUser] = useState(null);
const [activeTab, setActiveTab] = useState("greeting");
  • ✅ 이처럼 상태 변수 이름 앞에 set을 붙이는 형식이 React의 관례
  • 이름은 직접 짓지만, 이 네이밍 패턴을 따르면 가독성 + 유지보수가 훨씬 좋아짐

4. 🧠 setState의 사용 방식 (2가지)

① 값을 직접 넣기

setCount(5);  // count = 5

② 이전 값을 활용해 바꾸기 (함수형 업데이트)

setCount(prev => prev + 1);  // count = 이전 값 + 1

➡ 이 방식은 비동기 처리 또는 동시 업데이트가 많을 때 안정적


5. 🔁 공통적인 동작 흐름

const [state, setState] = useState("초기값");
setState("새 값") → 상태 변경됨 → 컴포넌트 리렌더링

즉, setState는 상태 변경 + 렌더링 트리거를 동시에 처리하는 함수야.


6. ✨ React에서 많이 쓰이는 setState 함수들

상태 변경 함수 이름사용 예
useStatesetCount, setActiveTab상태 직접 관리
useReducerdispatch(action)복잡한 상태 로직
useRefref.current = ... (예외)직접 수정
useContextsetUser, setTheme전역 상태 공유

🎯 요약 한 줄

setState 함수는 React가 자동으로 제공하는 상태 제어 도구이며,
값을 바꾸고 UI를 다시 그리도록 해주는 핵심 메커니즘이다.
상태 변수 이름 앞에 set을 붙이는 관례는 가독성 높고, 일관된 React 코드 작성에 매우 유리하다.


이제 진짜 useState는 마스터했다고 봐도 돼 😎
다음은 useEffect로 넘어가도 되고, useReducer나 상태 공유 흐름도 잡아줄 수 있어!
언제든지 말만 해 🙌

profile
통합형 개발자. 기획부터 개발, 자동화까지. 문제를 구조적으로 이해하고, AI를 능동적으로 활용해 본질적인 해결책을 제시하는 사람입니다.

0개의 댓글