[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 3 useEffect

 

https://k-taeyang.tistory.com/11

[React]리액트 훅(Hook)에 대해 알아보자!(useState, useEffect) - 2 UseState

오늘은 React Hooks의 useEffect에 대해 중점적으로 알아보자.

 

우선, useEffect 함수는 리액트 컴포넌트가 랜더링 될때마다, 특정 작업을 실행할 수 있도록 하는 Hook이다.

앞선 시간에 배웠던 내용처럼, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메서드를

함수형 컴포넌트에서도 사용할 수 있게 된 것이다.

 

useEffect는 컴포넌트가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 처리할 수 있다.

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

 

이제 useEffect() 의 사용법에 대해 알아보자. 자세한 내용은 React 공식문서를 참고.

 

◾ useEffect() 사용법

 

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

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 위의 코드는 이전 시간의 Counter 예시를 바탕으로,

문서의 타이틀을 클릭 횟수가 포함된 문장으로 표현할 수 있도록 useEffect() 함수로 기능을 더했다.

 

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

useState와 마찬가지로 useEffect 함수 불러올 때는 위의 예시와 같이 불러온다.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
}

document.title 이라는 브라우저 API를 이용하여 문서 타이틀을 지정한다.

같은 함수 내부에 있기 때문에 최신의 count를 얻을 수 있다.

컴포넌트를 랜더링 할 때, React는 이 effect를 기억하였다가 DOM을 업데이트 한 이후에 실행한다.

이것은 맨 처음 랜더링은 물론, 그 이후의 모든 랜더링에 똑같이 적용된다.

 

👉 Tip!

componentDidMount 혹은 componentDidUpdate와는 달리 useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트하는 것을 차단하지 않습니다. 이를 통해 애플리케이션의 반응성을 향상해줍니다. 대부분의 effect는 동기적으로 실행될 필요가 없습니다. 흔하지는 않지만 (레이아웃의 측정과 같은) 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 별도의 Hook이 존재합니다.

 

useEffect()의 기본 형태는

useEffect( function, deps ) // deps(dependency)  : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열

 

이다. 위의 예시에 따르면 배열을 생략하여 넣었는데, 이는 에러가 아니라 올바른 사용법이다.

만약 배열을 생략하고 useEffect를 사용한다면 안에 있는 함수는 리랜더링 될 때마다 실행된다.

 

각 case별 예시를 통해 useEffect 함수를 유동적으로 사용하는 방법에 대해 알아보자.

 

1. Component가 mount 됐을 때 ( 처음 나타났을 때)

 

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

 

위 코드처럼 deps 위치에 빈 배열을 넣는다면 컴포넌트가 화면에 가장 처음 랜더링 될 때 한 번만 실행된다.

 

useEffect(() => {
	console.log('React Hooks useEffect')
    });

앞서 말했듯 배열을 생략한다면 리랜더링 될 때마다 실행된다.

 

2. Component가 update 될 때 ( 특정 props, state가 바뀔 때)

 

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

제목처럼 특정 값이 업데이트 될 때 실행하고 싶을 경우에는 deps 위치의 배열 안에 검사하고 싶은 값을 넣어준다.

 

하지만 업데이트 될 때만 실행하는 것이 아니라 컴포넌트가 mount 될 때도 실행된다.

 

3. Component가 unmount 될 때 + update 되기 직전일 때

 

useEffect(() => {
	console.log('react useEffect')
	console.log(temp)
    return() => {
    	console.log('cleanup')
    	console.log(temp)
    }
    }, [])

 

return 뒤에 나오는 함수를 반환하고, cleanup 함수라고 한다.

 

unmount될 때만 cleanup 함수를 실행하고 싶다면, 두 번째 파라미터로 빈 배열을 넣는다.

 

특정값이 update 되기 직전일 때 cleanup 함수를 실행하고 싶다면

deps 배열 안에 검사하고 싶은 값을 넣어준다.

 

👉 Tip!

deps에 특정 값을 넣게 된다면

컴포넌트가 처음 마운트 될 때, 지정한 값이 바뀔 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출이 된다.

 

useEffect 안에서 사용하는 상태나 props가 있다면, useEffect의 deps 에 넣어주어야 하는 것이 규칙이다.

만약 사용하는 값을 넣어주지 않는다면, useEffect 안의 함수가 실행될 때 최신 상태, props를 가리키지 않는다.

 

deps 파라미터를 생략한다면, 컴포넌트가 리랜더링 될 때마다 useEffect 함수가 호출된다.

 

- 참고 블로그 : https://xiubindev.tistory.com/100