State는 상태라는 뜻이다.

상태는 전구와 스위치에 빗대어 생각하면 쉽게 이해할 수 있다. 스위치를 끄면 전구에 불이 들어오지 않는데, 이를 ‘소등 상태’라고 할 수 있다. 반대로 스위치를 켜면 전구에 불이 들어오며 이를 ‘점등 상태’라고 할 수 있다.

전구의 상태 변화는 다음과 같이 정리할 수 있다.

• 전구의 상태는 소등과 점등으로 나눌 수 있다.
• 소등 상태일 때 스위치를 켜면 ‘점등’으로 상태 변화가 일어난다.
• 점등 상태일 때 스위치를 끄면 ‘소등’으로 상태 변화가 일어난다.

용어를 상태가 아닌 State로 변경하면 다음과 같다.

• 전구 State는 off(소등), on(점등) 둘 중 하나의 값을 갖는다.
• 전구 State의 값이 off일 때 스위치를 켜면 값이 on으로 바뀐다.
• 전구 State의 값이 on일 때 스위치를 끄면 값이 off로 바뀐다.

전구의 상태와 리액트 컴포넌트의 State는 매우 유사하다. 전구의 상태가 상태 변화에 따라 점등 또는 소등으로 변하는 것처럼 리액트 컴포넌트 또한 State 값에 따라 다른 결과를 렌더링한다.

State의 기본 사용법

✏️ useState로 State 생성하기