[React] useEffect와 라이프 사이클

인간도 탄생, 성장, 죽음의 단계가 있듯이, 컴포넌트도 생성, 업데이트, 소멸되는 과정이 있다. 이를 컴포넌트의 라이프 사이클이라고 한다.

리액트에서 컴포넌트의 라이프 사이클은 크게 세 단계로 나뉜다

 

• Mount: 컴포넌트가 생성된 순간
• Update: 컴포넌트가 업데이트되어 재렌더링 되는 순간
• Unmount: 컴포넌트가 소멸되는 순간

 

이러한 단계마다 특정 작업을 수행하는 것을 라이프 사이클 제어(생명주기 메서드)라고 한다.

원래 이는 클래스형 컴포넌트에서만 사용 가능했지만, 훅의 등장으로 useEffect를 통해 함수형 컴포넌트에서도 쉽게 사용할 수 있게 되었다

 

클래스형 컴포넌트에서 사용되는 생명주기 메서드를 간단히 살펴보자면(지금은 거의 안쓰이니)

원래 총 9가지의 단계가 있는데 주요한 단계는 다음과 같다

 

• componentDidMount: 컴포넌트가 마운트된 직후 실행

• componentDidUpdate: 컴포넌트가 업데이트된 직후 실행

• componentWillUnmount: 컴포넌트가 언마운트되기 직전에 실행

 

useEffect는 사이드 이펙트를 제어하는 리액트 훅이다

사이드 이펙트란 어떤 동작에 의해 파생되는 효과를 말하는데 나는 이를 "컴포넌트의 라이프 사이클(mount, update, unmount)에 맞춰 특정 작업을 수행하도록 만드는 것이다" 라고 이해했다

 

useEffect는 두 개의 인자를 받는다

useEffect(callback, depedency Array)

 

 

빈 배열([]): 마운트 시에만 실행( componentDidMount )

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

 

 

값이 있는 배열([dependency]): 해당 값이 변경될 때마다 실행 ( componentDidUpdate )

const [state, setState] = usestate(0)

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

 

 

반환 함수: 언마운트 시에 실행 ( componentWillUnmount )

useEffect(() => {


  return () => {
    console.log('unmount')
  };
}, []);