컴포넌트의 생명 주기 (Lifecycle)

생명 주기

생명주기란 react에서 컴포넌트가 생성이 되고, 업데이트가 되며, 소멸될 때까지의 과정을 말한다. 이러한 생명주기 단계에서는 컴포넌트가 특정한 시점에 어떤 작업을 수행하는지를 제어하고 조절할 수 있다. react의 생명주기는 class 컴포넌트가 더욱 직관적이지만, class 컴포넌트는 잘 사용하지 않고 함수형 컴포넌트도 충분히 생명주기를 갖고 있으므로 함수형 컴포넌트에서 살펴보자.

모든 컴포넌트는 여러 종류의 "생명주기 메서드" 를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다. class 컴포넌트는 다양한 종류의 생명주기 함수가 있기 때문에 편리할 것 같지만, 반복되는 로직을 줄이지 못하고 그대로 써야한다는 단점이 있다. 반면, 함수형 컴포넌트에서는 useEffect() 라는 hook 하나로 컴포넌트의 모든 생성, 업데이트, 소멸을 관장하며 컴포넌트의 사이드 이펙트를 담당한다.

컴포넌트의 생명주기에 대해 기억해야할 부분은 "컴포넌트는 계속 존재하는 것이 아닌 시간의 흐름과 사용자의 동작에 따라 생성되고, 업데이트 되고, 사라진다는 것이다" 라는 점이다.

사용법

useEffect(() => {
 	// 적용할 로직 
  
  	return () => {}	// clean up 로직
}, 의존성 배열);

첫 번째 파라미터로는 이펙트 함수(effect funtion) 가 들어가고, 두 번째 파라미터로는 의존성 배열(array of dependencies) 가 들어간다. 기본적으로, 컴포넌트가 그려질 때 이펙트 함수가 한번 실행된다.

의존성 배열은 말 그대로 이 useEffect가 의존하고 있는 배열인데, 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 리렌더링 이후 실행된다. 만약 이펙트 함수가 첫 렌더링되었을 때만 실행되게 하고 싶으면, 빈 배열 [] 을 넣어준다. 이렇게 하면 해당 useEffect() 가 어떠한 props나 state에 값에도 의존하지 않으므로, 추가적으로 실행되지 않는다. 의존성 배열에는 0개 이상의 값이 들어갈 수 있다.

return에는 clean up할 함수를 넣어준다. clean up이란, 컴포넌트가 소멸(unmount)될 때 호출되는 로직이다.

다음은 버튼을 클릭하면 count가 1씩 올라가며 useEffect() 의 실행 순서를 확인하는 예제이다.

import React, { useState, useEffect } from 'react';

function FunctionalComponent() {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(`current count is ${count}`);
    // 여기에서 원하는 작업을 수행
    return () => { 
      console.log('Component will unmount');     // clean-up 작업을 수행
    };
  }, [count]); // count 값이 변경될 때마다 실행

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default FunctionalComponent;

위 예제의 작동 순서와 결과는 아래와 같다.

1. 컴포넌트가 처음으로 마운트되었으므로, useEffect() 의 내부 함수인
   console.log(`current count is ${count}`); 가 실행된다. count 의 초기값은 0이므로, 0이 찍힌다.

2. 버튼을 클릭하면, count state가 변경되고, 컴포넌트가 "대체(변경)" 된다.

3. 기존의 컴포넌트가 사라졌으므로 useEffect()의 클린업 함수가 실행된다.

4. 변경된 컴포넌트의 count state가 변경되었고, 의존성 배열에 count가 들어가 있으므로
   useEffect() 내부의 함수가 한번 더 호출된다.

따라서 실행 결과는 다음과 같이 나온다.

정리

useEffect(() => {	
	// 컴포넌트가 마운트 된 후 실행
    // 의존성 배열에 빈 배열([])을 주면 컴포넌트가 마운트될 시에만 실행
    // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행
 	// 의존성 배열을 생략하고 인자 하나로 함수만 넣었을 때는 컴포넌트가 업데이트될 때마다 실행
	
   	return () => {
    	 // return 구문 내의 clean up 함수는 컴포넌트가 unmount될 때 실행
    };
    
}, [의존성 변수1, 의존성 변수2, ...]);

또한 useEffect()는 한번이 아닌 여러개를 만들 수 있으며, 이를 통해 개발자는 유저의 정보 변경 이후, 데이터 패칭이 이루어진 이후 등의 상황에서 다양한 로직을 개발하는 것이 가능하다.