티스토리 뷰
React 생명주기란?
- 리액트의 컴포넌트에는 라이프사이클(수명 주기)이 존재하며, 컴포넌트의 수명은 페이지에 렌더링되기 이전인 준비과정에서 시작하여 페이지에서사라질 때 끝난다.
- 컴포넌트를 처음으로 렌더링 할 때, 어떤 작업을 처리해야하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 때 컴포넌트의 라이프사이클 메서드를 사용한다.
- 이 라이프사이클 메서드는 클래스 컴포넌트에서 사용할 수 있으며, Hooks을 통해서도 사용가능하다.
라이프사이클 메서드
- 라이프사이클 메서드 종류는 총 9가지이며, Mount, Update, Unmount의 3 종류의 카테고리로 나눌 수 있다.
- 또한 각 메서드에 will 접두사가 붙으면 어떤 작업을 작동하기 전에 실행, Did 접두사가 붙으면 어떤 작업을 작동한 후에 실행하는 메서드이다.
Mount
DOM 객체가 생성되고 브라우저에 나타나는 것, 즉 컴포넌트 생성부터 최초 렌더링까지의 과정을 의미한다.
마운트 시 호출되는 메서드는 다음과 같다.
- constructor : 생성자라 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성사 메서드. 클래스형 컴포넌트에서는 초기 state를 정할 때 constructor를 사용해야 하며, 함수형 컴포넌트에서는 useState hook을 사용해 초기 state값 정할 수 있다.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}위의 코드는 아래와 같은 의미이다.
const Example = () => {
const [count,setCount] = useState(0);
}
- getDerivedStateFromProps : props 로 받아 온 값을 기존의 state에 동기화시키는 메서드. 컴포넌트가 Mount, Update 될 때 render 메서드가 호출되기 직전에 호출된다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무것도 갱신하지 않을 수 있다. 주로 시간이 흐름에 따라 변하는 props에 state가 의존하는 아주 드문 경우를 위하여 존재합니다.
static getDerivedStateFromProps(nextProps, prevState) {
// 조건에 따라 특정 값 동기화
if(nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return null; // state 변경할 필요 없을 경우 null 반환
}
- render : 준비한 UI를 렌더링하며, 반드시 구현돼야하는 메서드. this.props 와 this.state 에 접근할 수 있으며, 리액트 요소를 반환한다. render는 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용을 하지 않는 순수함수이다.
- componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드. 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출된다. 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출,이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리한다. useEffect가 이 역할을 수행 할 수 있다.
만약 componentDidMount에서 상태가 변화하거나 다른 작업이 실행된다면, 실행 결과를 반영하기 위해서 getDerivedStateFromProps와 render를 다시 호출한다. 이 때, componentDidMount는 다시 호출되지 않는다.
Update
컴포넌트는 다음 4가지 경우에 업데이트한다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링될 때
- this.foceUpdate로 강제로 렌더링 트리거할 때
업데이트에 호출되는 메서드는 다음과 같다.render,getDerivedStateFromProps 은 위에서 설명한 것과 동일하다.
- getDerivedStateFromProps
- shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정한다. props나 state를 변경했을 때 이전값과 같다면 변경하지 않는다. true 를 반환하면 다음 라이프사이클 메서드를 계속 실행, false 를 반환하면 작업을 중지한다. 일부러 반환값을 false로 고정하여 특정 상태의 값을 변경하는 것을 의도적으로 막을 수 있다.
- render
- getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출. 스크롤바 위치 유지같은 업데이트하기 직전의 값을 참고할 일이 있을 때 활용한다.
getSnapshotBeforeUpdate(prevProps, prevState) {
if(prevState.array !== this.state.array) {
const { scrollTop, scrollHeight } = this.list;
return { scrollTop, scrollHeight };
}
}- componentDidUpdate : 컴포넌트의 업데이트 작업이 다 끝난 후 호출. 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있거나, getSnapshotBeforeUpdate 에서 반환한 값이 있으면 여기서 전달받을 수 있다. useEffect에서 deps에 값이 있다면, 이 단계에서 실행된다.
Unmount
Mount 와 반대로 컴포넌트를 DOM에서 제거하는 것을 Unmount 라고 한다. 언마운트는 오직 componentWillUnmount 만을 호출한다.
- componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출. componentDidMount 에서 등록한 이벤트, 타이머, 직접 생성한 DOM이 있다면, 여기서 제거 작업을 해야한다. useEffect에서 deps가 빈 배열이거나 공란이면 componentWillUnmount단계에서 제거작업을 수행하는 함수를 리턴할 수 있다.
댓글