[React]Lifecycle

Lifecycle=생애주기

React의 LifeCycle

React는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이난다. 

라이프 사이클은 크게 세가지로 Mount(탄생), Update(변화), UnMount(죽음)로 나뉜다.

Update(리렌더)는 4가지 상황에서 발생한다.

1. props(외부 상태)가 바뀔 때
2. state(내부 상태)가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. this.forceUpdate로 강제로 렌더링 트리거할 때

컴포넌트의 라이프 사이클을 제어한다는 것은 까다롭지 않다. 단순히 컴포넌트가 탄생하고 변화하고 죽는 과정에서 각각 어떤 작업을 수행하게 하는 것을 라이프 사이클을 제어한다고 말할 수 있다. 위 사진처럼 탄생 시에 초기화 작업을 시키거나 변화를 통해 발생할 수 있는 예외를 처리하고, 컴포넌트가 사라질 때 해당 컴포넌트가 사용하던 메모리를 반환하게 하는 작업을 하는 것이다. 소프트웨어를 견고하고 효율적으로 개발하기 위해선 기술의 라이프 사이클을 온전히 이해하고 이용할 수 있어야 한다.

 

라이프 사이클 메서드

ComponentDidMount와 같은 메서드들은 함수형 컴포넌트에선 사용할 수 없다. Class형 컴포넌트에서만 사용할 수 있으며 Class형 컴포넌트에선 hooks를 이용하여 상태를 관리할 수 없다. 

 

Class형 컴포넌트의 단점: 길어지는 코드 문제, 복잡성이 높고, 중복 코드가 다수 발생하며, 가독성이 떨어진다.

 

함수형 컴포넌트에서 라이프 사이클 제어하기

useEffect

 - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

 - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다.

import React, { useEffect } from "react;

useEffect(() => {
  // todo... 
}, []); // 컴포넌트가 마운트된 시점에만 동작

useEffect(() => {
  // todo... 
}); // 컴포넌트내 모든 변화에 동작

useEffect(() => {
  // todo... 
}, [count]); // count의 state가 변할 때 동작

이러한 형태를 가지고 있다. Dependency Arry(의존성 배열)을 사용해서 동작의 기준을 정해줄 수 있다.

const UnmountTest = () => {
  useEffect(() => {
    console.log('Mount!')

    return () => {
      console.log('UnMount')
    }
  }, []);
  return <div>Unmout Testing Componet</div>;
};

useEffect내의 UnMount 시점은 return의 콜백함수로 지정한다.

useEffect는 컴포넌트 Mount, Update, Unmount 또는 어떤 특정 값의 변화를 추적할 수 있는 유용한 라이프 사이클 제어 훅이다. 

useEffect를 사용하지 않으면 상태가 상태가 변할때마다 반복적으로 실행되기에 무한루프에 빠질 수 있다.