시냅스

WIL : React Life Cycle, 몇몇의 회고... 본문

TIL

WIL : React Life Cycle, 몇몇의 회고...

ted k 2021. 11. 28. 16:07

 

리액트는 v16.8을 통해 Hook 컴포넌트를 선보였다.

목적은 뚜렷이 복잡한 class형 컴포넌트 상태관리의 단순화와 재사용성을 높이겠다는 것이었다.

물론 잘 정착한 덕에 우리는 라이프사이클에 대해 2번에 걸쳐 배워야하게 되었다...

 

Class형 컴포넌트의 Life Cycle

  • getDerivedStateFromProps : props를 state에 넣어주고 싶을 때 사용
  • shouldComponentUpdate : 리렌더링 여부 결정( 최적화에 용이 )
  • getSnapshotBeforeUpdate : 변화가 일어나기 직전의 DOM 상태를 가져와 특정 값을 반환하면 그 다음 발생하게 되는 componentDidUpdate에서 받아와서 사용 가능
  • componentDidUpdate : 변화가 모두 반영된 뒤 호출되는 메서드
  • componentDidMount : 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다.
  • componentWillUnmount : 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.

 

Hook형 컴포넌트의 Life Cycle

  • useState : getDerivedStateFromProps 와 동일하다.
  • useEffect : shouldComponentUpdate, componentDidUpdate(cleanup), componentDidMount, componentWillUnmount(cleanup), 와 동일하다.
  • useMemo : shouldComponentUpdate 와 동일하다.
  • 대체 없음 : getSnapshotBeforeUpdate

 

몇몇의 회고...

 

우선 좀 피곤하다...

여러가지 요인이 있겠지만 주요한 것은 스케쥴 관리인 것 같다.

더 기민하고 효율적일 필요가 있겠다. 꾸준히 하자 꾸준히!

Comments