State instance

같은 ToggleSwitch라도 state 저장 공간은 따로 생긴다

App에서 같은 컴포넌트를 두 번 사용하면 React는 각 위치에 독립된 isToggled 값을 보관합니다. 

<ToggleSwitch />
<ToggleSwitch />
첫 번째

클릭한 스위치

isToggled true
화면 문구 켜짐 / 끄기

첫 번째 setter가 호출되어 첫 번째 컴포넌트만 다음 렌더에서 true 값을 읽습니다.

두 번째

그대로인 스위치

isToggled false
화면 문구 꺼짐 / 켜기

같은 함수로 만든 컴포넌트라도 별도 위치의 state는 자동으로 함께 바뀌지 않습니다.

사용자 클릭
해당 setter
해당 state
그 컴포넌트 렌더

실습에서 볼 점

스위치 두 개를 각각 눌러 보면, 컴포넌트 재사용은 UI 구조를 공유하지만 state 값까지 공유한다는 뜻은 아님을 확인할 수 있습니다.