#6.0 Introduction

한 번만 render 하고 싶은 경우?

API를 가져오는 경우

어떻게 특정 코드들이 첫번째만 RENDER하도록

나머지 state가 변경되더라도 rerender 되지 않게 하는 방법을 알아본다.

※ state가 변경될 때 모든 코드가 다시 render 된다

가끔은 이것이 괜찮지만 가끔은 component 내부 몇몇 코드는 처음 딱 한 번 실행되고 다시 실행되지 않았으면 하는 것이 있을 것이다. 

 

useEffect

코드가 한 번만 실행하도록 해준다

 

import { useState, useEffect } from 'react';
import Button from './Button';
import styles from './App.module.css';

function App() {
  const [counter, setValue] = useState(1);
  function onClick() {
    setValue((prev) => prev + 1);
    console.log("I run all the time");
  }
  // const iRunOnlyOnce = () => {
  //   console.log("I run only once");
  // }
  useEffect(() => { console.log("CALL THE API") }, []);

  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <Button onClick={onClick} txt="This is a button" bgc='red' />
    </div>
  );
}

export default App;