React의 컴포넌트는 생성부터 소멸까지의 과정을 생명주기(Life Cycle)이라고 정의한다. 각 생명주기마다 함수가 존재하여 특정 시점의 동작을 제어할 수 있다.
✔︎ constructor(props)
맨 처음에 실행되는 생성자 함수이다. state나 객체 변수를 선언할 때 사용하며 함수 안의 첫 부분엔 프로퍼티와 생명주기의 상태를 초기화 하는 super(props)를 먼저 호출해야 한다.
✔︎ render()
데이터의 상태가 변경될 때, 새 화면을 그리기 위해서 호출된다. 정확히 render()안의 JSX(JavaScript XML)를 반환해서 화면에 결과물을 출력한다.
✔︎ getDerivedStateFromProps(props, state)
정적 함수의 일종이기 때문에 this.state this.props로 state, props에 접근할 수 없고 전달된 파라미터로만 접근할 수 있다.
•props: 상위 Component로부터 전달 받는다.
•state: 현재 Component의 state값
✔︎ componentDidMount()
render 함수가 JSX를 리턴하여 화면을 모두 그린 후 실행 되는 함수.
화면에 모두 렌더링되고 실행할 작업들을 이 안에 모아 둔다.
✔︎ shouldComponentUpdate(nextProps, nextState)
프로퍼티가 변경되거나 setState함수를 실행해서 state 값을 변경할 때, 화면을 새로 업데이트할지의 여부를 결정 한다. 데이터 변화를 비교하는 작업이기에 React 성능에 영향을 많이 준다.
✔︎ getSnapShotBeforeUpdate()
컴포넌트의 내용 변화가 가상 화면에 완성 되고 호출되는 함수. 컴포넌트가 실제 화면이 나타나기 전에 호출돼서 DOM 정보(스크롤 위치, element 크기 등)에 접근할 때 사용된다.
✔︎ componentDidUpdate(prevProps, prevState, snapshot)
컴포넌트가 화면에 나타나고 호출되는 함수. 각 파라미터는 다음과 같다.
• prevProps: 부모 컴포넌트로부터 전달 받은 이전 프로퍼티 값
• prevState: 부모 컴포넌트로부터 전달 받은 이전 상태 값.
• snapshot: getSnapShotBeforeUpdate()에서 전달된 값.
스크롤, 커서 등의 위치를 이동시키는 DOM 정보를 변경할 때 사용한다.
✔︎ componentWillUnmount()
컴포넌트의 소멸 직전 호출된다. 만약 setInterval()을 사용하고 clearInterval()로 작업을 해주지 않는다면 메모리 누수 및 브라우저 성능 저하가 발생하기도 해서 이 부분을 커버한다.
참고
1) http://innovationm.co/react-component-lifecycle/
2) https://medium.com/humanscape-tech/react-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0-c7f45ef2d0be
3)https://daniel-park.tistory.com/38?category=785997
4)https://devowen.com/307?category=778540
