[TIL] 생명주기 / useEffect

생명주기

리액트는 컴포넌트를 생성하고 렌더링하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명주기(lifecycle)라고 표현한다.

 

모든 리액트 컴포넌트는 Mount, Update, Unmount 세 가지의 단계로 구분되는 생명주기를 갖는다.

Mount

컴포넌트가 생성되는 순간, 즉 컴포넌트가 화면에 처음 렌더링되는 시점이다.

Update

마운트 이후에 컴포넌트가 다시 렌더링되는 시점이다.

Unmount

렌더링에서 제외되는 순간, 즉 컴포넌트가 화면에서 사라지는 시점이다.

 

 

useEffect

useEffect란?

useEffect는 컴포넌트의 사이드 이펙트를 제어하는 훅이다.

 

리액트에서의 사이드 이펙트란 어떤 동작에 따른 부수적인 효과 또는 파생되는 효과다.

useEffect 사용법

useEffect(콜백_함수, 의존성_배열);

 

useEffect를 호출하고 첫번째 인수로 콜백 함수와 두번째 인수로 의존성 배열을 넣으면 된다.

 

의존성 배열은 해당 이펙트가 의존하고 있는 배열인데 배열 안에 있는 변수 중에 하나라도 값이 변경되었을 때 콜백 함수가 실행된다.

 

useEffect를 통해 생명주기 함수 대체

useEffect 훅은 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate(), componentWillUnmount()와 동일한 기능을 하나로 통합해서 제공한다.

 

Mount

의존성 배열로 빈 배열을 넣으면 된다.

 

useEffect는 의존성 배열에 있는 값이 변경되어야만 실행되기 때문에 콜백 함수는 해당 컴포넌트가 처음 마운트될 때 이후에는 실행되지 않는다.

 

Update

의존성 배열을 생략하면 된다.

 

콜백 함수는 마운트 될 때 한 번 실행된 다음에 리렌더링될 때마다 계속 실행된다.

 

Unmount

의존성 배열로는 빈 배열을 넣고 콜백 함수 안에서 반환하는 함수를 작성하면 된다.

 

콜백 함수가 반환하는 함수를 정리함수라고 표현하는데 정리함수는 컴포넌트가 언마운트될 때 호출한다.

 

 

 

출처 : 한 입 크기로 잘라먹는 React