useEffect

useEffect를 사용하면 side effect를 수행할 수 있다.

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것은 모두 side effect.

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>
  );
}

useEffect(함수)

첫 번째 인자는 함수.

함수 내에서 side effect를 실행.

다음과 같은 조건에서 실행

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행.

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook을 호출
• React 함수 내에서 Hook을 호출

조건부 effect 발생

두 번째 인자는 배열.

종속성 배열(dependency array).

useEffect(함수, [종속성1, 종속성2, ...])

배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행.

배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행.

useEffect(함수, [])

빈 배열을 두 번째 인자로 사용하면, 컴포넌트가 처음 생성될 때만 effect 함수가 실행.

처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용.