[React] 리액트 생명주기 간단요약

---

제로초님 블로그 요약입니다. 자세한 사항은 제로초님 블로그에 찾아가주세요

www.zerocho.com/category/React/post/579b5ec26958781500ed9955

(React) React의 생명 주기(Life Cycle)

---

Mount(처음 실행 시기)

1. 컴포넌트가 처음 실행됨(Mount)
2. 실행되면 context, defaultProps, state 저장.
3. componentWillMount 호출(Mount 중 이기 때문에 props나 state를 바꾸면 안됨) 리액트 17부터 비추천!
4. render 로 DOM에 컴포넌트 부착, Mount가 완료됨.
5. componentDidMount 호출. (여기서부터 DOM에 접근 가능. AJAX 요청, setTimeout 등의 행동을 함)

Props 업데이트 시기

1. componentWillReceiveProps 리액트 17부터 비추천!
2. shouldComponentUpdate(render 전 이기 때문에 return false를 하면 render 취소 가능. 성능 최적화를 하는 단계. 쓸모없는 update를 걸러내는 작업.)
3. componentWillUpdate(여기서 state를 바꾸면 안됨. 업데이트 되지 않았기 때문에 바꾸면 2번으로 돌아감)render(업데이트 완료) 리액트 17부터 비추천!
4. componentDidUpdate

 

 

State 업데이트 시기

setState 호출을 통한 state 업데이트 과정

props 업데이트 과정에서 componentWillReceiveProps를 제외한 것과 같음.

 

Unmount(컴포넌트 제거 시기)

컴포넌트를 더이상 사용하지 않을 때 발생.

componentWillUnmount

 

---

용도에 맞지 않는 메소드를 이용하면 리액트가 자동으로 에러메세지 띄워줌

실제로 사용해보기 전 까지 느낌을 잡기는 힘들것 같다. 

그런데 이렇게 적어두면 흐름이 이해가 간다.