컴포넌트에는 생명주기라는 것이 존재한다
Mount → Update → Unmount의 형태로 이루어져 있는데
만들고, 갱신하고, 없애고 정도로 이해했다(당연함 뜻이 그거임)
그런 라이프사이클을 처리하는 애들이 라이프사이클 메소드인데 클래스형 컴포넌트에서만 사용가능하다. 함수형 컴포넌트의 경우 Hooks을 이용하여 비슷한 효과를 가져올 수 있는데 그것도 공부해야지...
이미지누르면 저 페이지로 이동할 수 있다. 함수들 클릭하면 관련 문서로 이동되니 직접 확인해보는게 더 좋을지도...
글고 이 함수들 정말 직관적인 이름을 가지고 있어서 솔직히 이름만봐도 대충 뭐하는 놈인지 짐작이 가능했다.
Mount
constructor(props)
말그대로 컴포넌트를 생성하는 함수
다음과 같은 형태가 기본적이다
constructor(props){
super(props)
/*
보통 this.state에 객체를 직접 할당하여
지역 state를 초기화하거나 이벤트 처리 메서드를 binding함
*/
}이 안에서 setState()를 호출하지 않도록 주의
state에 props를 복사하지 않도록 주의 this.state={color : props.color}
getDerivedStateFromProps(props, state)
props로 받아온 값을 state에 동기화시키는 용도로 사용
→ 자주 사용하지 않음, 드물게 시간의 흐름에 따라 변화하는 props를 이용해야할 때 사용
⭐render()⭐
유일하게 필수적으로 구현해주어야하는 메소드
일반적으로 JSX를 이용하여 컴포넌트의 생김새를 정의
아무것도 보여주고 싶지 않다면 null이나 false값을 반환하면 된다.
state의 변화가 없다면 매번 호출될 때마다 동일한 결과를 도출해야하기 때문에
이벤트 설정과 관련없다면 setState()를 사용하면 안되며
브라우저 DOM과 상호작용하는 것도 안됨(이건 componentDidMount()여기서 처리)
componentDidMount()
컴포넌트의 mount가 끝난 후 호출(하지만 mount단계로 분류...?)
DOM node가 있어야 초기화 할 수 있는 작업들을 여기서 시행
보통 외부 데이터를 위한 네트워크 요청을 보내는 위치
각 함수에 콘솔 출력함수를 추가하고 첫 실행을 하게 되면 위와같은 순서로 호출되는 것을 확인할 수 있다.
Update
getDerivedStateFromProps(props, state)
위와 동일
shouldComponentUpdate(nextProps, nextState)
반환하는 boolean 값에 따라 컴포넌트의 생김새를 업데이트 할지말지, 즉, render(),componentDidUpdate()를 호출할 것인지를 처리하는 함수.
→ 오직 성능 최적화를 위한 것, 렌더링 방지목적 X
render()
위와 동일
getSnapshotBeforeUpdate(prevProps, prevState)
rendering 후 그것이 DOM에 반영 된 후에 호출
DOM으로부터 수정되기 전의 props, state값을 받아올 수 있음
이 함수의 반환값은 componentDidUpdate()함수의 세번째 인자 snapshot으로 전달된다.
componentDidUpdate(prevProps, prevState, snapshot)
역시 네트워크를 요청하는 작업, DOM에 접근하는 작업을 보통 여기서 처리
prevProps, prevState를 통해 이전에 가졌던 값에도 접근 가능
역시나 순서를 파악할 수 있으며 shouldComponentUpdate()에서 nextProps, nextState를 통해 변경할 값을 알 수 있으며
render()를 통해 컴포넌트의 생김새가 수정된 이후에도
getSnapshotBeforeUpdate()과 componentDidUpdate()를 통해 수정 이전의 색상값도 확인할 수 있다.
Unmount
componentWillUnmount()
컴포넌트가 Unmount되기 직전에 호출되어componentDidMount()에서 실행한 작업, 생성한 것들에 대한 제거를 처리 약간 뒷처리같기도
타이머제거, 구독해제, 네트워크 요청취소 등등
참고자료
리액트를 다루는 기술, 김민준
https://ko.reactjs.org/docs/react-component.html
