리액트 라이프 사이클을 이해해봅시다🤣
이 포스트는 벨로퍼트님의 리액트를 다루는 기술을 토대로 하고 있습니다.
라이프사이클의 메서드의 이해
- 라이프 사이클은
class형 컴포넌트에서만 사용됩니다. 하지만 함수형 컴포넌트에서hooks를 이용해 구현이 가능합니다.
마운트
마운트 될 때 발생하는 생명주기들
- constructor
컴포넌트 생성자 메서드. 컴포넌트가 만들어지면 바로 실행됨
constructor(props) {
super(props);
console.log("constructor");
}- getDerivedStateFromProps
props으로 받아온 값을state값에 넣어주고 싶을 때 사용. 다른 메서드들과 달리 앞에static필요. 내부에서this조회 불가! 만약 리턴되는 객체가 있다면 내용들이 state 값을 설정 null이 리턴되면 아무일도 안일어남.
static getDerivedStateFromProps(nextProps, prevState) {
console.log("getDerivedStateFromProps");
if (nextProps.color !== prevState.color) {
return { color: nextProps.color };
}
return null;
}-
render
컴포넌트를 랜더링하는 메서드. 라이프 사이클 메서드 중에 유일하게무조건있어야 하는 메서드.jsx를 반환해 컴포넌트의 모양을 잡아줌 -
componentDidMount
컴포넌트의 첫번째 렌더링을 마치면 호출되는 메서드. 이 메서드가 호출된 시점엔 이미 컴포넌트의 모양이 화면에 나온 상태. 이 메서드에선 주로 외부 라이브러리 연동이 일어 나거나, 서버에 데이터 요청이 주로 일어남.
(hooks의 useEffect의 사용과 비슷하다고 생각하면 쉽습니다!!)
업데이트
렌더링 이후, 업데이트 시 일어나는 라이크 사이클 메서드
-
getDerivedStateFromProps
마운트와 동일! -
shouldComponentUpdate
컴포넌트가 리렌더링 할지 말지 결정하는 메서드. 주로 최적화에 사용되어 지는데 hook의React.memo와 역할이 비슷
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate", nextProps, nextState);
// 숫자의 마지막 자리가 4면 리렌더링하지 않습니다
return nextState.number % 10 !== 4;
}-
render
마운트와 동일! -
getSnapshotBeforeUpdate
컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져옴. 특정 값을 반환하면 그 다음에 발생하게 되는componentDidUpdate에서 그 값을 사용할 수 있음
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate");
if (prevProps.color !== this.props.color) {
return this.myRef.style.color;
}
return null;
}- componentDidUpdate
리렌더링이 끝나고 화면에 모든 변화가 반영되고 난 뒤 호출되는 메서드, 3번째 파라미터로 위에서 설명한 메서드의 반환 값을 조회 할 수 있음.
componentDidUpdate(prevProps, prevState, snapshot) {
console.log("componentDidUpdate", prevProps, prevState);
if (snapshot) {
console.log("업데이트 되기 직전 색상: ", snapshot);
}
}언마운트
- componentWillUnmount
컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드 - 주로
DOM에 직접 등록했던 이벤트를 제거하거나,setTimeout을 제거하는 등, 비동기적 로직을 제거함.
componentWillUnmount() {
console.log("componentWillUnmount");
}마치며
Hooks의 등장으로 인해 라이프사이클에 대한 이해가 예전보단 덜 중요하다는 의견이 많은 것 같습니다. 그래도 컴포넌트의 라이프 사이클을 알고 있으면, 현재 상태값들의 이동과 상황을 파악하는데 도움이 된다고 생각하기에 가볍게 개념정도만 알고 있다면 좋을 거 같습니다.😎
이미지로 보는 라이프 사이클
