이번에 알아 볼 내용은 useEffect
Hook에 대해 알아보기 전에 생명주기에 대한 내용을 짚고 넘어가야 할 거 같아서는 먼저 생명 주기란 무엇인지 대해 알아보기로 한다!
생명주기 (Lifecycle) 란?
소프트웨어 개발에서 생명주기(Lifecycle)이란 어떤 프로그램이 실행되고, 종료되는 과정을 의미한다.
리액트에서는 리액트 웹 어플리케이션에서 컴포넌트가 생성(실행)되고, 삭제(종료)되는 과정을 의미한다. 리액트에서는 이러한 과정을 세세하게 나누어 컨트롤 할 수 있다. 아래에 일련의 과정을 나타낸 이미지를 참고해보도록 하자.
생성, 실행(Mount) ➡️ 업데이트(Update, Re-render) ➡️ 삭제, 종료 (Unmount)
Mount 단계에서 실행되는 메서드를 순서대로 알아보자.
this.props
, this.state
에 접근할 수 있어 초기 값을 정할 수 있다.constructor(props) {
super(props);
console.log("constructor");
}
props
의 값을 state
에 넣어서 사용할 때의 메서드state
로 설정되며 null
을 반환할 경우 아무 일도 발생하지 않음static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.color !== prevState.color) {
return { color: nextProps.color };
}
return null;
}
이벤트 등록
, setTimeout
, setInterval
, 네트워크 요청
등과 같은 비동기 작업을 처리 하면 된다.Update의 단계로 컴포넌트 업데이트 시점의 메서드를 순서대로 알아보자.
컴포넌트가 업데이트 되는 경우
props
가 변경될 때state
가 변경될 때- 부모 컴포넌트가 리렌더링 될 때
this.forceUpdate
로 렌더링을 강제로 트리거 할 때
props
의 변화에 따라 state
에도 변화를 주고자 할 때 사용한다.true
: 리렌더링, false
: 리렌더링 하지 않음getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevState.array !== this.state.array) {
const { name, price } = this.item
return { name, price };
}
}
prevProps
or prevState
를 사용하여 컴포넌트가 이전에 가졌던 데이터 접근할 수 있다.getSnapshotBeforeUpdate
의 반환 값이 있다면 snapshot
으로 전달받을 수 있다componentDidUpdate(prevProps, prevState, sanpshot) {...}
DOM에서 컴포넌트가 제거되어 화면에서 사라지는 것을 말한다.
componentDidMount
에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면 여기서 제거를 해주어야 한다.리액트의 16.8 업데이트 이후로 클래스 컴포넌트의 생명주기 메서드를 클래스가 아닌 Hook을 통해 함수 컴포넌트에서도 생명주기를 다룰 수 있게 되었다.
return
문이 실행된다.함수 컴포넌트에서의 생명주기는 이와같이 useEffect
Hook과 매우 관련되어 있다. 클래스형 컴포넌트의 생명주기를 대체하는 Hook으로도 불리는 useEffect
는 다음 글에서 정리해려고 한다. 현재에는 클래스형 컴포넌트보다는 함수 컴포넌트를 주로 사용하고 있다. 나 또한 함수 컴포넌트로 공부하였고, 개발을 진행하다보니 잘 몰랐던 클래스형 컴포넌트의 생명주기 메서드에 대해 알게 되어서 재미있었다.
앞으로도 함수 컴포넌트를 사용하겠지만 이 내용들에 대해 알고있다면 추후에 어떤 기능을 개발할 때 어떻게 동작하는지 동작 순서와 같은 부분을 이해하는데에 좀 더 도움이 될 것이라고 생각한다!
.
.
.
.
.
.
.
참고 사이트
[minbr0ther] - 리액트 라이프사이클 순서, 역할, Hook
[dea8307] - React 라이프사이클 이해
[tistory-younho9] - 라이프사이클 메서드
[jinyoung985] - 함수형 컴포넌트의 생명주기
[리액트 공식문서] - State와 라이프사이클