상태

컴포넌트를 제어하는 데이터는 크게 두 가지 타입이 있다: props와 state. props는 부모 컴포넌트에 의해 설정되며, 컴포넌트의 생명주기 동안 고정된 값을 유지한다. 반면에 변경될 가능성이 있는 데이터는 state를 사용해야 한다.

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

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

TypeScript

JavaScript

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

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

state는 React에서와 동일하게 작동하므로, 상태 처리에 대한 더 자세한 내용은 React.Component API를 참고하면 된다. 이쯤에서 대부분의 예제가 기본 텍스트 색상을 사용한다는 것을 눈치챘을 것이다. 텍스트 색상을 커스터마이징하려면 스타일에 대해 알아보자.