State와 생명주기

** 리액트 컴포넌트 종류 중 주로, 클래스 컴포넌트와 관련된 내용들입니다. **

 

State 가 뭐임?

> 리액트 컴포넌트의 상태를 의미함.

>> 쉽게 말하면 리액트 컴포넌트의 변경 가능한 데이터를 state 라고 부름.

 

State의 특징

> 리액트 state는 그냥 하나의 자바스크립트 객체임.

>> state 는 직접적인 변경이 불가능함.

>>> state 를 변경하고자 할 때에는 꼭 setState() 라는 함수를 사용하셈.

 

L I F E C Y C L E 생.명.주.기.

 

사람의 생명 주기에 출생 ~ 인생 열심히 살아~ 노화 ~ 사망이 있듯이...

마찬가지로 리액트 컴포넌트도 이러한 생명 주기를 가지고 있음.

 

컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미.

 

1. Mount

- 컴포넌트가 생성되는 시점

- 컴포넌트의 constructor (생성자) 가 실행됨.

- 생성자에서는 컴포넌트의 state 를 정의하게 됨.

 

컴포넌트가 렌더링 되며 이후에 componentDidMount() 함수가 호출됨.

 

2. Update

- 컴포넌트가 생애 동안 변화를 겪으며 여러 번 렌더링 됨.

- 업데이트 과정에서 컴포넌트의 props 가 변경되거나 setState() 함수 호출에 의해 state 가 변경되거나 forceUpdate() 라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링됨.

 

렌더링 이후에 componentDidUpdate() 함수가 호출됨.

 

언마운트 직전에 componentWillUnmount() 함수가 호출됨.

 

3. Unmount

- 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때.

 

리액트 생명주기에서 기억해야 될 것

> 컴포넌트가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고, 업데이트되다가 사라진다는 것.