useEffect

 

1. 컴포넌트가 처음 render될 때만 코드가 실행 되도록 하기

- state가 변화할 때 모든 컴포넌트가 다시 실행되는 상황에서 컴포넌트가 처음 딱 한번만  실행되도록하기 

현재 코드

app.js

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

export default App;

 

2. useEffect

- 두 개의 아규먼트를 가지는 함수
  첫 번째 아규먼트는 딱 한번만 실행하고 싶은 코드이다.

- App.js

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;

 

 

3. useEffect 단순화하기

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");
  useEffect(() => {
    console.log("call the api...");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

export default App;