📌 Effect가 필요한 이유

이전 시간에 배운 내용을 상기하면서 생각해 보자.

useState와 props를 이용하여 counter를 만들어 보자.

import { useState } from "react"; // useState를 import 한다.

function App() {
  // 우리는 create react app에서 작업을 하고 있고, useState를 위에서 이미 import 했기 때문에 React.useState의 형태로 작성하지 않아도 된다.
  const [counter, setValue] = useState(0);
  // 이전 counter 값에 1을 더한 값을 counter 값으로 설정한다.
  const onClick = () => setValue((prev) => prev + 1);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

Counter가 정상적으로 작동하는 것을 볼 수 있다.

이제 언제 render되는지를 살펴보자. 다음과 같이 코드를 추가한다.

function App() {
  .....
  const onClick = () => setValue((prev) => prev + 1);
  console.log("render");     // 주목!
  return (
  .....

App 컴포넌트가 처음으로 render되어 화면에 보여질 때, render가 콘솔 창에 찍힌다. (render가 2번 출력되는 이유는 index.js에서 이 <React.StrictMode>에 감싸져 있기 때문이다.)

그리고 버튼을 눌러 counter가 증가할 때마다 render가 콘솔 창에 찍힌다.App 컴포넌트의 state가 변화한 것이기 때문이다.

이렇게 우리는 계속 state를 change해 왔고, 그럴 때마다 컴포넌트의 모든 것이 다시 실행(render)되는 것에 익숙했다.

가끔씩은 다시 render될 때마다 반복 실행되어도 괜찮은 코드가 있다. (위와 같이 증가하는 숫자를 보여주어야 하는 경우)

but 어떨 때는 컴포넌트가 처음 render될 때만 코드가 실행되길 원할 수도 있다.

예를 들어, 위의 console.log('render') 코드는 state가 변화할 때마다 같이 render되는데, 이 코드는 처음 화면이 render될 때만 실행되게 하고 싶을 수도 있다.

즉, 첫번째 render에만 코드가 실행되고, 그 이외의 다른 state 변화가 일어날 시에는 실행되지 않도록 하는 것이다.

다른 상황으로 예를 들어보자면, API를 통해 데이터를 가져올 때, 컴포넌트의 첫번째 render에서만 API를 호출하고, 이후에 state가 변화할 때 그 API에서 데이터를 또다시 가져오고 싶진 않을 것이다.

따라서 우리는 어떻게 특정 코드들이 첫번째 component render에서만 실행되게 하는지에 대해 알아야 한다.