[React] Lifecycle 생명주기에 대하여..

React Lifecycle에 대해 좀 더 자세히 알아보고자 합니다.

 

 

리액트의 생명주기

리액트 컴포넌트에는 생명주기라는 것이 있다.

 

컴포넌트가 실행, 업데이트, 제거 되는 것이다.

 

 

사용이유?: 각 Lifecycle 주기 마다 중간중간 코드 실행이 가능하다.

 

 

컴포넌트의 실행 Mount

 

컴포넌트가 시작되면 우선 Context, defaultProps, state를 저장한 후에 

componentWillMount 메소드를 호출 -> render로 컴포넌트를 DOM에 부착한 후

Mount가 완료되었다면 conponentDidMount가 호출됨.

 

※ conponentWillMount에서는 props 나 state를 바꾸면 안됨, 

왜?? Mount 중이기 때문 + 아직 DOM에 render하지 안았기 때문에 DOM에서도 접근할 수 없음.

 

conponentDidMount 에서는 DOM에 접근할 수 있다.

그래서 여기서는 주로  AJAX 요청을 하거나, setTimeOut, setInterval 같은 행동을 함.

 

 

Mount 순서 Summary 

 

1. state, context, defaultProps 저장

2. componentWillMount

3. render

4. componentDidMount

 

 

Props Update

 

 

props가 업데이트 되기 전에 업데이트가 발생하였음을 감지하고,

componentWillReceiveProps 메소드가 호출됨.

-> shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 후,

업데이트 완료(render)가 되면,

componentDidUpdate가 된다.

 

이 메소드들은 첫번째 인자로 바뀔 Props에 대한 정보를 가지고 있습니다.

componentDidUpdate만 이미 업데이트 되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있다.

 

 

shouldcomponentUpdate에서는 아직 render 하기 전이기 때문에 return false를 하면 render를 취소할 수 있다.

주로 여기서는 성능 최적화가 이루어진다. (쓸떼없는 update가 일어나면 여기서 걸러내는 것.)