[React] Life Cycle

리액트로 컴포넌트를 개발했다면 각 컴포넌트에는 Life Cycle이 존재한다. Life Cycle를 이해하고 있어야 효율적으로 컴포넌트를 개발하고 적용시킬 수 있으며 디버깅도 좀 더 쉽게 할 수 있다고 생각한다. 이전에 Life Cycle에 대한 개념을 알지 못했을 때 데이터가 업데이트 되었지만 적용이 되지 않은 문제 등을 겪었다. 리액트를 통해 Life Cycle에 대한 개념과 관련 메서드, Hook 등을 알아보자.

---

Life Cycle

Life Cycle은 컴포넌트가 생성되고 제거될 때까지의 과정을 의미하며 각 과정에 따라서 생명주기 메서드가 순서대로 호출된다. 먼저 아래의 그림과같이 크게 3가지로 Life Cycle을 나눌 수 있다.

Mount : 컴포넌트에 대한 인스턴스가 생성되고 DOM 구조에 삽입되는 순간을 의미한다.

Update : 컴포넌트의 props 또는 state가 변경되었을 때 리렌더링될 때를 의미한다.

UnMount : 컴포넌트가 DOM 상에서 제거될 때를 의미한다.

위의 세 가지 상태에따라 호출되는 Life Cycle Method가 존재하며 이를 활용하여 상태를 처리하고 컴포넌트를 관리할 수 있다. 아래의 그림은 각 상태에 따라 순서대로 호출되는 대표적인 생명주기 메서드를 나타낸 것이다. 각 상태에 따른 생명주기 메서드를 자세히 알아보자.

Mount

constructor() : 생성자 함수로서 props, state와 메서드 등을 초기화하는 작업이 진행된다. 생성자 함수는 마운트되기 전에 호출이 되며 this 객체에 바인딩하기 전에 super(props)를 반드시 호출해야한다. 이는 ES6에서 class를 생성하고 상속을 받을 때 나타나는 이유때문이며 추후에 ES6의 class를 정리하면서 자세히 알아보도록 한다. 

 

render() : 클래스로 생성한 컴포넌트에서 반드시 정의해야하는 메서드이다. 상태에 따라 해당 컴포넌트가 어떻게 브라우저에 출력되는지 정의하게되며 render()는 순수 함수로서 호출될 때마다 같은 결과를 반환하도록 해야한다.

 

componentDidMount() : 컴포넌트가 DOM 트리에 삽입된 직후에 호출되는 메서드이다. 해당 함수에서 외부에서 받아오는 데이터를 요청하거나 데이터 구독을 설정하는데 많이 사용된다.

 

Update

shouldComponentUpdate() : 현재의 props 또는 state에 변화가 생겼을 때 리렌더링 되기 직전에 호출되는 메서드이다. 자주 사용되는 메서드는 아니며 DOM 작업의 수를 최소화하기위한 성능 최적화에 사용될 수 있다.

 

render() : Mount의 render()와 같은 역할을 한다.

 

componentDidUpdate() : update가 잉러난 직후에 호출이 되며 컴포넌트가 update되었을 때 DOM 조작하기 좋은 메드이며 네트워크 요청을 보낼 수도 있다.

 

UnMount

componentWillUnMount() : 컴포넌트가 DOM상에서 제거되기 직전에 호출되는 메서드이다. 이 메서드 내에서 타이머 제거, 네트워크 요청 취소, 구독 해제 등의 작업을 처리할 수 있다.

---

위에서 알아본 생명주기 메서드는 클래스형 컴포넌트에서 사용할 수 있는 메서드들이다. 그렇다면 함수형 컴포넌트에서는 Life Cycle을 어떻게 구현하는지 알아보자.

 

useEffect

함수형 컴포넌트에서는 생명주기 메서드를 대체하여 useEffect라는 훅을 사용할 수 있다. 클래스형 컴포넌트는 컴포넌트 중심적으로 생명주기가 맞춰져있지만 함수형 컴포넌트는 특정 데이터를 중심으로 생명주기가 진행된다. 다음은 useEffect를 사용하는 다양한 예시이다.

 

- data에 변화가 있을 때마다 실행되도록 만들기

아래의 코드는 data가 변할 때마다 data를 출력하는 함수이다. [data]가 작성된 부분은 dependency를 정의하는 공간으로 해당 데이터에 종속되어 변할 때마다 함수가 실행된다.

useEffect(() => {
	console.log(data);
}, [data]);

 

- 마운트 되었을 때 한번만 실행되도록 만들기

아래의 코드는 deps를 나타내는 배열이 비어있다. 이는 어떠한 상태에 종속되어있는 것이 아니며 마운트 되었을 때 한 번만 실행되도록 할 수 있다.

useEffect(() => {
	console.log('mounted');
}, []);

 

- 컴포넌트가 리렌더링 될 때마다 실행되도록 만들기

아래의 코드처럼 deps 배열을 추가하지 않으면 컴포넌트가 리렌더링 될 때마다 실행되도록 만들 수 있다.

useEffect(() => {
	console.log('mounted');
});

 

- Unmount될 때 실행되도록 만들기

아래의 코드처럼 return을 해주면 Unmount 될 때 해당 함수가 실행된다.

useEffect(() => {
	console.log('mounted');
    return () => {
    	console.log('unmount');
    }
});

---

함수형 컴포넌트에서 useEffect를 적절히 사용하여 Life Cycle을 제대로 활용하도록 해야겠다.