useState

state는 setter를 거쳐 다음 화면을 만듭니다

값은 컴포넌트 안에 보관되고, 변경 함수가 호출되면 React가 같은 컴포넌트를 다시 렌더링해 새 값을 반영합니다.

기본형 const [count, setCount] = useState(0) setCount(prev => prev + 1)

1. 초기값

처음 기억할 값

useState(false)처럼 컴포넌트가 시작할 상태를 정합니다.

2. 렌더링

count나 isToggled를 JSX에서 읽어 화면을 만듭니다.

3. setter

버튼 클릭 같은 이벤트에서 setCount를 호출합니다.

4. 다음 화면

직접 대입하지 않아도 state 변경 뒤 화면은 새 값 기준으로 갱신됩니다.

이전 값에 의존할 때

빠르게 여러 번 갱신될 수 있으면 prev => prev + 1 형태로 최신 이전 값을 받아 계산합니다.

같은 컴포넌트도 state는 각자

ToggleSwitch A

켜짐을 기억

ToggleSwitch B

꺼짐을 기억