useEffect

# useEffect란 ?

: useEffect를 사용하면, 불필요하게 rendering을 할 필요가 없는 부분을, 더 이상 rendering 되지 않게 해줌

  (즉, 1번만 실행하게끔 하고 싶을 때 = API를 1번만 가져오면 되는데, 실행 될 때 마다 API를 가져오게끔 하지 않기 위해)

 

1) useEffect를 import 해줘야 함 #1 

2) useEffect를 통한 함수 작성 useEffect(()=> { }, [ ] )   #2

import React, { useState, useEffect } from 'react';  ---- #1
import PropTypes from 'prop-types';
import Button from './Button';
import styles from "./App.module.css";

function App(){
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev+1)
  console.log("I run all the time");
  useEffect(()=> {                                    ---- #2
    console.log("CALL THE API...");  
  }, [])
  return (
    <div>
      <h1>{counter}
      </h1>
      <button onClick={onClick}>Click me</button>
    </div>
    )
}
  
export default App;

 

3) 실행시 화면

 

첫번째 실행시

 

 

두번째 실행시 (useEffect를 사용한 "CAA THE API..." 부분은 재랜더링이 되지 않음)