[React] useEffect 란? (feat.생명주기)

useEffect는 리액트에서 컴포넌트가 Rendering 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 이에 대해 알기 위해서는 리액트 생명주기에 대해 알아야 한다.

 

생명 주기

리액트에는 '생명 주기'가 존재하는데, 컴포넌트가 렌더링이 시작되는 시점부터 끝나는 시점까지를 말한다. 이때 렌더링이 시작되는 지점을 mount, 렌더링이 끝나는 지점을 unmount라고 한다. 아래 그림을 통해서 생명 주기에 대해서 자세히 알아보자.

출처 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

컴포넌트는 생성(Mount) - 업데이트(Update) - 제거(Unmount)의 주기를 갖는다.

 

Mount

먼저 Mount는 DOM 객체가 생기고 브라우저에 나타나는 것을 말한다. 이때 호출되는 함수는 다음과 같다.

- constructor() : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수, 초기 state를 설정
- getDerivedStateFromProps() : props와 state를 동기화할 때 사용하는 함수
- render() : 컴포넌트의 기능과 모양새를 정의하는 함수로 리액트 요소 반환
- componentDidMount() : 컴포넌트를 생성하고 첫 렌더링을 끝내고 호출하는 함수

 

Update

컴포넌트가 업데이트될 때 실행되는 함수이다. 컴포넌트가 업데이트될 때는 props 혹은 state 값이 변경되거나 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링되는 경우가 있다. 이때 호출되는 함수는 다음과 같다.

- getDerivedStateFromProps() : mount 호출 함수와 동일
- shouldComponentUpdate() : 컴포넌트를 리렌더링할 지 결정하는 함수, true일 때 아래 함수들을 호출해서 업데이트를 반영하여 컴포넌트를 리렌더링하고 false인 경우 리렌더링하지 않고 아래 함수를 호출하지 않음
- redner() : 새로운 값을 사용해서 View를 리렌더링
- getSnapshotBeforeUpdate() : 업데이트된 요소에 대해서 DOM 객체에 반영하기 직전에 호출
- componentDidUpdate() : 컴포넌트 업데이트가 끝나고 리렌더링 후에 호출

 

UnMount

컴포넌트가 DOM에서 제거되기 전에 componentWillUnmount 함수가 호출되고 제거가 완료된다.

 

useEffect()

앞서 언급했던 것처럼 useEffect는 리액트에서 컴포넌트가 Rendering 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 기본 형태는 useEffect(function, deps)으로, function에 수행하고자 하는 작업, deps에는 검사하고자 하는 특정 값을 배열에 저장한다.

 

컴포넌트가 mount 되어 처음 렌더링되었을 때 한 번만 실행하는 경우에 다음과 같이 사용할 수 있다. 배열을 생략하면 리렌더링될 때마다 실행한다.

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

 

 

컴포넌트가 업데이트되는 경우, 즉 props나 state가 변경되는 경우에는 다음과 같이 사용할 수 있다. 특히, 특정 값이 업데이트될 때 실행하고 싶은 경우에 deps에 검사하고자 하는 값을 넣는다. 또 업데이트될 때만 실행되는 것이 아니라 mount 될 대도 실행되기 때문에 업데이트될 때만 특정 함수를 실행하고 싶다면 다른 방법을 사용해야 한다.

useEffect(() => {
	console.log(name);
    console.log('Update!');
}, [name]);

 

컾컴포넌트가 unmount 되거나 업데이트되기 직전에는 cleanup 함수를 반환한다.