물론이지! 아래는 요청한 대로 기존 정리에
📌 상태 변수 이름 앞에 set을 붙이는 네이밍 규칙 설명까지 포함해서 최종 정리본으로 업데이트했어 👇
useState의 setState 함수 총정리 (네이밍 규칙 포함)useState란?컴포넌트 내부에서 상태(state)를 만들고,
그 상태를 변경할 수 있는 함수(setState)를 함께 반환하는 React의 Hook
const [state, setState] = useState(initialValue);
setState는 어떤 함수인가?| 특징 | 설명 |
|---|---|
| 자동 생성됨 | useState를 호출하면 React가 자동으로 만들어줌 |
| 네가 직접 정의하지 않음 | function setState() { ... } 이런 식으로 만들지 않음 |
| 상태를 바꾸는 역할 | setState("newValue") → 상태가 바뀌고 컴포넌트가 리렌더링 됨 |
setState는 어떻게 이름 지어야 할까?)useState로 상태를 선언할 때,const [count, setCount] = useState(0);
const [user, setUser] = useState(null);
const [activeTab, setActiveTab] = useState("greeting");
set을 붙이는 형식이 React의 관례setState의 사용 방식 (2가지)setCount(5); // count = 5
setCount(prev => prev + 1); // count = 이전 값 + 1
➡ 이 방식은 비동기 처리 또는 동시 업데이트가 많을 때 안정적임
const [state, setState] = useState("초기값");
setState("새 값") → 상태 변경됨 → 컴포넌트 리렌더링
즉, setState는 상태 변경 + 렌더링 트리거를 동시에 처리하는 함수야.
| 훅 | 상태 변경 함수 이름 | 사용 예 |
|---|---|---|
useState | setCount, setActiveTab 등 | 상태 직접 관리 |
useReducer | dispatch(action) | 복잡한 상태 로직 |
useRef | ref.current = ... (예외) | 직접 수정 |
useContext | setUser, setTheme 등 | 전역 상태 공유 |
setState함수는 React가 자동으로 제공하는 상태 제어 도구이며,
값을 바꾸고 UI를 다시 그리도록 해주는 핵심 메커니즘이다.
상태 변수 이름 앞에set을 붙이는 관례는 가독성 높고, 일관된 React 코드 작성에 매우 유리하다.
이제 진짜 useState는 마스터했다고 봐도 돼 😎
다음은 useEffect로 넘어가도 되고, useReducer나 상태 공유 흐름도 잡아줄 수 있어!
언제든지 말만 해 🙌