State


State란?

리액트 컴포넌트의 상태를 의미하는 것으로 컴포넌트의 변경 가능한 데이터라고 볼 수 있다. state를 정의할 때 중요한 점ㄴ은 꼭 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 것이다.

State의 특징

자바스크립트의 객체다.

state는 정의된 이후 일반적인 자바스크립트 변수를 다루듯이 직접 수정할 수는 없다. 첫 번째 방법은 state를 직접 수정하는 방법이고, 두 번째는 setState() 함수를 통해 수정하는 방법이다. state는 직접적인 변경은 불가능하다고 생각하는 것이 좋다. 그래서 setState()라는 함수를 사용해야 한다.

생명주기에 대해 알아보기


Untitled

먼저 컴포넌트가 생성되는 시점, 사람으로 말하면 출생이다. 이 과정을 mount라고 한다. 이때 constructor가 실행된다. constructor는 state를 정의하게 된다. update 과정에서는 props가 변경되거나 state가 변경된다. Unmount는 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 언마운트된다고 볼 수 있다.

이렇게 컴포넌트는 시간의 흐름에 따라 생성되고 사라짐을 반복한다.