상태 관리

컴포넌트를 제어하는 데이터는 props와 state 두 가지 타입이 있다. props는 부모 컴포넌트에 의해 설정되며, 컴포넌트의 수명 동안 고정된다. 변경될 데이터는 state를 사용해야 한다.

일반적으로 state는 생성자에서 초기화하고, 변경할 때 setState를 호출한다.

예를 들어, 계속 깜빡이는 텍스트를 만들고 싶다고 가정해 보자. 텍스트 자체는 깜빡이는 컴포넌트가 생성될 때 한 번 설정되므로, 텍스트는 prop이다. "텍스트가 현재 켜져 있는지 꺼져 있는지"는 시간에 따라 변하므로, 이 정보는 state에 저장해야 한다.

TypeScript

JavaScript

실제 애플리케이션에서는 타이머로 state를 설정하지 않는다. 서버에서 새로운 데이터를 받거나 사용자 입력에 따라 state를 설정할 수 있다. 또한 Redux나 MobX와 같은 상태 관리 라이브러리를 사용해 데이터 흐름을 제어할 수도 있다. 이 경우 setState를 직접 호출하는 대신 Redux나 MobX를 사용해 상태를 변경한다.

setState가 호출되면, BlinkApp 컴포넌트는 리렌더링된다. 타이머 내에서 setState를 호출하면, 컴포넌트는 타이머가 틱할 때마다 리렌더링된다.

state는 React에서와 동일하게 동작하므로, state를 다루는 방법에 대한 자세한 내용은 React.Component API를 참고할 수 있다. 지금쯤이면 대부분의 예제에서 기본 텍스트 색상을 사용한다는 것을 알아챘을 것이다. 텍스트 색상을 커스터마이징하려면 스타일에 대해 배워야 한다.