React로 작업할 때 마지막으로 가장 중요한 것

ReactJS가 어떻게 작동했는지 상기시켜 보자

import { useState } from "react";
//↓↓↓↓ React.useState()라고 하지 않고 ↑↑↑↑ import {useState} from "react"; 해주면 된다.
function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1); // state값 +1
  console.log("render");
  return (
    <div>
      <h1>{counter}</h1>
      //반복 실행이 아닌 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수
      있다.
      <button onClick={onClick}>click me</button>
    </div>
  );
}
export default App;

지금은 나의 state가 변할 때 마다 매번 이 console.log는 실행될 것이다. 가끔은 첫번째로 render할 때만 코드를 실행하고 싶을 수도 있을 것이다.
그리고 나중에는 그렇게 하지 않을 수도 있다.

그래서 첫번째 render에만 코드가 실행되고 다른 state변화에는 실행되지 않도록 해보자

이런일이 언제 일어나냐?

예를들어, 내가 API를 통해 데이터를 가져올 때 첫 번쩨 component render에서 API를 call 하고, 이후에 state가 변화할 때 그 API에서 데이터를 또 다시 가져오고 싶진 않겠지 않는가?

이게 문제다.

import { useState } from "react";
function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1); // state값 +1
  console.log("Call an API");
  return (
    <div>
      <h1>{counter}</h1>
      //반복 실행이 아닌 컴포넌트가 처음 render 될 때만 코드가 실행되길 원할 수 있다.
      <button onClick={onClick}>click me</button>
    </div>
  );
}
export default App;

내가 state를 변경할 때 모든 code들은 다시 실행된다..항상
가끔은 처음 딱 한번만 실행되고 이후에는 원하지 않을 수도 있다. 다음시간에 배워보자.