7. 컴포넌트의 라이프사이클 메서드

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존대한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다. 프로젝트 진행시 컴포넌트를 처음으로 렌더링할 때, 혹은 컴포넌트를 업데이트하기 전후로 어떤작업을 처리해야 할 수있고, 또 불필요한 업데이트를 방지해야 할 수도 있다. 이때 컴포넌트의 라이프 사이클 메서드를 사용한다.

👀라이프사이클 메서드?
**라이프사이클 메서드는 함수 컴포넌트에서는 사용할수 없고 클래스형 컴포넌트에서만 사용할 수 있다.
함수 컴포넌트 에서는 Hooks 기능을 사용해 비슷한 작업을 처리 할 수 있다.

7-1.라이프사이클 메서드의 이해

라이프 사이클 메서드의 종류는 총 아홉 가지 이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서이드고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다.

라이프사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트카테고리로 나뉜다.

마운트(페이지에 컴포넌트가 나타남) ->
[리렌더링]업데이트(컴포넌트 정보를 업데이트) ->
언마운트(페이지에서 컴포넌트사라짐)

👀마운트?
**DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. 이 때 호출하는 메서드는

✔ constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
✔ getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드
✔ render : 우리가 준비한 UI를 렌더링하는 메서드
✔ componentDidMount : 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

👀업데이트?
**컴포넌트는 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링될 때, this.forceUpdate로 
강제로 렌더링을 트리거할 때 총 4가지 경우 업데이트한다.

✔ getDerivedStateFromProps : 이 메서드는 마운트과정에서도 호출되며, 업데이트가 시작하기 전에도 호출.
props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용
✔ shouldComponentUpdate : 컴포넌트가 리렌더링을 해야 할지 말아야할지를 결정하는 메서드
✔ render : 컴포넌트를 리렌더링
✔ getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드
✔ componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

👀언마운트?
**마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는것을 언마운트라고 한다.

✔ componentWillUnmount : 컴포넌트가 웹브라우저상에서 사라지기 전에 호출하는 메서드

7-2. 라이프사이클 메서드 살펴보기

1. render() 함수

render() {...}

이 메서드는 컴포넌트 모양새를 정의한다. 라이프사이클 메서드 중 유일한 필수 메서드이다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 주의 사항으로는 이 메서드 안에서는 이벤트 설정이 아닌 곳에 setState를 사용하면 안되고, 브라우저의 DOM에 접근하면 안된다. DOM 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다.

2. constructor 메서드

constructor(props) {...}

컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다. 초기 state를 정할 수 있다.

3. getDerivedStateFromProps 메서드

static getDerivedStateFromProps(nextProps, prevState) {
	if(nextProps.value !== prevState.value) {
    	return { value: nextProps.value };
    }
  	return null;
}

리액트 v16.3 이후에 새로 만든 라이프사이클 메서드이다. props로 받아 온 값을 state에 동기화 시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트될 때 호출된다.

4. componentDidMount 메서드

componentDidMount() {...}

컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행.

5. shouldComponentUpdate 메서드

shouldComponentUpdate(nextProps, nextState) {...}

props또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서스. 이 메서드는 꼭 true, false값을 반환해야 한다. 컴포넌트를 만들 때 이 메서드를 따로 생성하지 않으면 기본적으로 언제나 true값을 반환하다. 프로젝트 성능을 최적화할 때, 상황에 맞는 알고리즘을 작성하여 리렌더링을 방지할 때는 false값을 반환하게 한다.

6. getSnapshotBeforeUpdate 메서드

getSnapshotBeforeUpdate(prevProps, prevState) {
	if(prevState.array !== this.state.array) {
    	const { scrollTop, scrollHeight } = this.list
        return { scrollTop, scrollHeight };
    }
}

리액트 v16.3 이후 만든 메서드이다. render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출된다. 주로 업데이트하기 직전의 값을 참고할 일이 있을 때 활용된다.

7. componentDidUpdate 메서드

componentDidUpdate(prevProps, prevState, snapshot) {...}

리렌더링을 완료한 후 실행한다. 업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방하다.

8. componentWillUnmount 메서드

componentWillUnmount {...}

컴포넌트를 DOM에서 제거할 때 실행한다.

9. componentDidCatch 메서드

componentDidCatch (error, info) {
	this.setState({
    	error: true
    });
  	console.log({ error, info });
}

컴포넌트가 렌더링 도중에 에러가 발생했을 때 애플리케이션이 먹통이 되지 않고 오류 UI를 보여 줄 수 있게 해준다. error는 파라미터에 어떤 에러가 발생했는지 알려주며, info 파라미터는 어디에 있는 코드에서 오류가 발생했는지 대한 정보를 준다.

라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용하다.

리액트를 다루는 기술을 읽고 요약한 글 입니다😊