[React] state , Lifecycle

1. State

  - '상태'라는 의미로, React에서 React Component의 상태라는 뜻을 가지고있다.

  - state 특징

1. 사용자가 정의한다
2. state는 Javascript의 객체다
3. React에서 관리하므로 setState 함수만 사용해서 수정한다.

2. Lifecycle

  - '생명주기'라는 의미로, React component의 생명주기라는 뜻을 가지고있다.

 

Component는 Mounting, Updating, Unmounting으로 나눠져있다.

 

2-1 Mounting

constructor -> render -> React updates DOM and refs -> componentDidMount

constructor: 생성자 함수로, state초기값 지정할 때 사용

componentDidMount: 컴포넌트 마운트가 끝나면 호출되는 함수

 

2-2 Updating

New props, setState(), forceUpdate() -> render -> React updates DOM and refs -> componentDidUpdate

내용이 바뀔경우 New props, setState(), forceUpdate()을 이용하여 Update가 일어날 것이다. 

componentDidUpdate: 컴포넌트 업데이트가 완료 되었다는 함수 호출

 

2-3 Unmounting

Unmounting -> componentWillUnmont

component가 DOM에서 제거되는 것을 Unmounting라고 한다.

componentWillUnmount: component가 제거되기 직전에 호출된다.