React | nomadcoders 3/n

#6.0 Introduction

드디어 create-react-app으로 실행하는 코드.

• 아래 코드를 실행하면 console에 render가 2번씩 찍히는 현상이 나타난다.
  이 현상은 React.StrictMode 때문이라고 함 - React에서 디버깅을 위해 제공하는 wrapper.
  🔗 My React components render twice and drive me crazy

import { useState } from "react";
function App(){
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('render');
  return(
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  )
}

export default App;

예를 들어 코드에서 API를 call했다고 해보자. 그런데 state 변화 때마다 API call이 계속 re-render된다면, 이것은 해결해야 할 문제다.
어떻게 하면 특정 코드들은 첫번째의 컴포넌트 render에서만 실행되게 할 수 있을까?

#5.1 useEffect

바로.. useEffect 함수를 이용하면 된다!

useEffect(effect: EffectCallback, deps?:DependencyList): void

첫번째 argument(인자)는 우리가 딱 한 번만 실행하고 싶은 코드.
두번째 argument(인자)는... 우선 빈 배열로 주고 실험.

아래 코드를 실행시키면 console에는 두 코드가 한번 찍히고, 그 뒤 state가 변화될 때마다 i run all the time만 찍히게 된다.

import { useEffect, useState  } from "react";
function App(){
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log('i run all the time');
  const iRunOnlyOnce = () => {
    console.log("i run only once");
  }
  useEffect(iRunOnlyOnce, []);
  return(
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  )
}

export default App;