➊ LifeCycle Method
리액트 컴포넌트가 생성-변화-소멸되는 일련의 과정을 생명 주기(LifeCycle)라고 한다.
리액트 프로젝트를 실행하면 컴포넌트는 브라우저상에 나타나며
props 혹은 state가 바뀔 때마다 업데이트되기도 하고
페이지를 이동하거나 나가면 컴포넌트는 사라진다.
이때 컴포넌트가 최초 브라우저상에 나타나는 것을 마운트(mounting),
속성이나 상태가 변경되어 갱신되는 것을 업데이트(updating),
컴포넌트가 사라지는 것을 언마운트(unmounting)라고 한다.
마운트, 업데이트, 언마운트가 발생할 때에는 특정한 메서드들이 호출되는데 이러한 메서드들을 LifeCycle Method 라고 한다.
아래의 그림에서 LifeCycle Method의 종류와 호출 순서를 한눈에 볼 수 있다.
위 그림에 나타난 생명주기 메서드들을 더 자세히 설명하도록 하겠다!
➋ 마운트
컴포넌트가 마운트될 때 즉, 화면에 최초로 나타났을 때 아래의 메서드들이 순차적으로 호출된다.
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
① constructor
컴포넌트의 생성자 메서드이며 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드다.
constructor 메서드를 직접적으로 건드릴 때는 다른 구문에 앞서 super(props)을 꼭 호출해야 한다.
그렇지 않으면 this.props가 생성자 내에서 정의되지 않아서 버그가 발생할 수 있다.
constructor(props) {
super(props);
(추가 작업...)
}② getDerivedStateFromProps
getDerivedStateFromProps 는 props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다.
사용 예시를 한번 보자!
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.color !== prevState.color) {
return { color: nextProps.color };
}
return null;
}다른 생명주기 메서드와는 달리 앞에 static 을 필요로 한다.
여기서 특정 객체를 반환하게 되면 해당 객체 안에 있는 내용들이 컴포넌트의 state 로 설정이 된다.
위의 코드에서는 이전 state의 색상이 이후 props의 색상과 다르다면
props의 색상으로 state를 설정해주고 있다.
반면 null 을 반환하게 되면 아무 일도 발생하지 않는다.
참고로 이 메서드는 컴포넌트가 최초 마운트될 때와 업데이트될 때 둘 다 호출된다!
③ render
컴포넌트를 DOM에 부착하여 실질적으로 화면에 렌더링하는 메서드다.
이 메소드가 실행되고부터는 DOM을 읽을 수 있다.
(이전 단계는 아직 Render 중이므로 DOM에 접근해서는 안 된다!)
④ componentDidMount
컴포넌트가 마운트된 직후, 즉 DOM 트리에 삽입된 직후에 호출되는 메서드다.
이 메서드가 호출되는 시점에는 해당 컴포넌트가 화면에 나타난 상태이다.
여기선 외부 라이브러리 연동을 하거나,
해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 ajax 요청을 하거나,
DOM 의 속성을 읽거나 직접 변경하는 작업을 진행한다.
위의 함수를 사용할 일이 종종 있을 것이다!
➌ 업데이트
컴포넌트가 업데이트될 때 아래의 메서드들이 순차적으로 호출된다.
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
① getDerivedStateFromProps
위의 마운트 목차에서 설명했듯이,
getDerivedStateFromProps 는 props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다.
② shouldComponentUpdate
shouldComponentUpdate 는 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드다.
이 메서드에서는 반드시 true 혹은 false를 반환해야 한다.
주로 최적화 할 때 사용하는 메서드다.
만약 false가 반환되었으면 이후 과정을 더이상 진행하지 않는다.
③ render
컴포넌트를 DOM에 부착하여 실질적으로 화면에 렌더링하는 메서드다.
이 메소드가 실행되고 부터는 DOM을 읽을 수 있다.
(이전 단계는 아직 Render 중이므로 DOM에 접근해서는 안 된다!)
④ getSnapshotBeforeUpdate
render에서 렌더링된 결과가 브라우저에 실제로 반영되기 직전에 호출된다.
해당 컴포넌트에 변화가 일어나기 직전의 DOM 상태를 가져와서 반환하며
이 반환 값은 componentDidUpdate 에 인자로 전달된다.
채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등에 활용할 수 있다.
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.color !== this.props.color) {
return this.myRef.style.color;
}
return null;
}⑤ componentDidUpdate
리렌더링이 끝나고 화면에 우리가 원하는 변화가 모두 반영되고 난 뒤 호출되는 메서드다.
3번째 파라미터로 getSnapshotBeforeUpdate 에서 반환한 값을 조회 할 수 있다.
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
console.log("업데이트 되기 직전 색상: ", snapshot);
}
}➍ 언마운트
컴포넌트가 화면에서 사라질 때 다음과 같은 하나의 메서드가 호출된다.
- componentWillUnmount
① componentWillUnmount
componentWillUnmount는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
여기서는 componentDidMount 에서 직접 등록했었던 이벤트를 제거하고,
외부 라이브러리를 사용한 게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출하면 된다.
생명 주기 메서드들 중 우리가 자주 사용하게 될 메서드는
componentDidMount, componentWillUnmount이다.
그러니 활용 용도를 잘 기억해두도록 하자 👀
또한 이러한 라이프사이클 메서드는 클래스 컴포넌트에서만 사용할 수 있다.
함수 컴포넌트에서 비슷한 기능을 수행하고 싶다면 useEffect와 같은 리액트 훅을 이용하자!
-끝-
📎 참고 자료
리액트 공식 문서
https://ko.legacy.reactjs.org/docs/react-component.html
벨로퍼트와 함께하는 모던 리액트
https://react.vlpt.us/basic/25-lifecycle.html
리액트 생명주기 이미지
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
잘못된 정보, 오탈자를 발견하면 편하게 댓글로 말씀해주시면 감사하겠습니다 🙂
