[React] 라이프사이클 메서드

Mira Jo·2021년 8월 26일

7장. 컴포넌트의 라이프사이클 메서드

  • 클래스형 컴포넌트에만 사용(함수형의 Hooks기능)
  • 마운트/ 업데이트/ 언마운트로 나뉨
  • 총 9가지. Will-, Did-,

1) 마운트 : DOM이 생성되고 웹 브라우저 상 나타나는 것
Constructor(컴포넌트 새로 만들 때마다 호출되는 생성자)
-> getDerivedStateFromProps(props에 있는 값을 state에 넣을 때 사용)
-> render(UI를 렌더링)
-> componentDidMount(컴포넌트가 웹 브라우저상에 나타난 후 호출. 다른 자바스크립트 library 호출, 이벤트 등록, 각종 비동기 작업 처리)

2) 업데이트 – props/ state가 바뀔 때, 부모 컴포넌트 리 렌더링, this.forceUpdate
getDerivedStateFromProps
shouldComponentUpdate(반드시 true/false 반환. This.props/state , nextProps/nextState)
render
getSnapshotBeforeUpdate
componentDidUpdate

2) 언마운트 – 컴포넌트를 DOM에서 제거 componentwillUnmount

** Render() 내에서는 이벤트 설정이 아닌 곳에서 setState사용하거나 DOM에 접근하면 안됨.
DOM의 정보를 가져오거나 state변화를 줄 때는 componentDidMount()에서 처리해야함

0개의 댓글