Effect Hook을 사용하면 함수 컴포넌트에서 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>
	);
}

정리를 이용하지 않는 Effects

React DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우 ⇒ 네트워크 리퀘스트, DOM 수동조작, 로깅 정리

Class를 사용하는 예시

class 컴포넌트의 render 메서드 그 자체는 side effect가 없다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

class 안의 두 개의 생명주기 메서드에 같은 코드가 중복되는 것에 주의하자

클래스 컴포넌트에서는 렌더링 됬을 때 side effect이 실행되려면 어쩔 수 없이 두 번 실행되야 한다. ⇒ 단점

Hook을 사용하는 예시

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

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

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

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

useEffect가 하는 일은 무엇일까? useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는 지를 말해준다.

useEffect를 컴포넌트 안에서 불러내는 이유는 무엇일까? useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state 변수에 접근할 수 있게 된다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 얻을 수 있다. ⇒ 클로저를 이용하여 자유변수를 잡아두어 수행할 수 있다.

useEffect는 렌더링 이후에 매번 수행되는 걸까? 응, 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. ⇒ effect는 렌더링 이후에 발생한다. 즉, effect 실행 시점에 DOM이 업데이트 되었음을 보장한다.

상세한 설명

숙련된 자바스크립트 개발자라면 useEffect에 전달된 함수가 모든 렌더링에서 다르다는 것을 알아챘을지도 모릅니다. 이는 의도된 것으로서, count 값이 제대로 업데이트 되는지에 대한 걱정 없이 effect 내부에서 그 값을 읽을 수 있게 하는 부분이기도 합니다. 리렌더링하는 때마다 모두 이전과 다른 effect로 교체하여 전달합니다. 이 점이 렌더링의 결과의 한 부분이 되게 만드는 점인데, 각각의 effect는 특정한 렌더링에 속합니다. 이 페이지의 뒷부분에서 이것이 왜 유용한지에 대해서 더 자세히 다룰 것입니다. ⇒ 다시 이해하기