React - Lifecycle

Perfume·2020년 11월 8일
0

값을 바꿀 때는 무조건 Setstate 해줘야 render도 된다

componentDidMount 는 최초 render 될 때 한 번만 불린다

아무튼, 리액트에는 라이프사이클이라는 게 있고 이 라이프사이클에 대한 이해가 없으면 뜻밖의 오류와 마주할 수 있다.

Lifecycle 기본 순서

  1. constructor
  2. render
  3. componentDidMount
  4. (fetch 완료)
  5. render
  6. (setState)
  7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
  8. componentWillUnmount

부모 - 자식 Lifecycle 순서

1.부모 constructor
2.부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
3.자식 constructor
4.자식 render
5.자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
6.부모 componentDidMount
7.부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
8.부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
9.자식 render
10.자식 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생. 여기까지 하고 다시 부모로 넘어감.)
11.부모 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)

profile
공부하는 즐거움

0개의 댓글