useEffect()

  • useEffect 란 코드를 언제 실행할지 선택하는 것

  • useEffect() 는 React component가 새로고침(렌더링) 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook이다

  • 비동기로 처리가 가능하다

useEffect 함수 불러오기

import React, { useEffect } from "react";

Component가 실행될 때 (나타날 때)

useEffect(() => {
  console.log("새로고침 될때마다 실행");
});

👆 새로고침 될때마다 실행

useEffect(() => {
  console.log("맨 처음 실행될 때 한 번만 실행");
}, []);

👆 새로고침할때마다 최초 한번만 실행하고 새로고침 전까진 실행될일이 없음

Component가 Update 되었을 때 (props, state 변경)

useEffect(() => {
  console.log(effect); // 새로고침할때마다 최초 한번만 실행하고
  console.log("effect이라는 값이 업데이트 될 때만 실행");
}, [effect]); // effect 만 지켜본다는 뜻 / effect 가 Update될때마다 실행된다

👆 처음 한번 실행하고 그 이후로는 Update 될때만 실행

예제코드

import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0); // 기본값은 0
  const [keyword, setKeyword] = useState(""); // 기본값은 빈배열

  const onClicks = () => setCounter((current) => current + 1); // 버튼을 클릭할때마다 1씩 증가

  const onChanges = (e) => setKeyword(e.target.value); // input 창에 타자를 칠때마다 밸류를 인식
  console.log("I run all the time"); // 버튼, 타자칠때마다 문구를 consol에 출력

  // useEffect 란 코드를 언제 실행할지 선택하는 것
  useEffect(() => {
    console.log("I First one"); // 새로고침할때마다 최초 한번만 실행하고 새로고침 전까진 실행될일이 없음
  }, []);

  useEffect(() => {
    console.log("I Keyword changes"); // 새로고침할때마다 최초 한번만 실행하고
  }, [keyword]); // keyword 만 지켜본다는 뜻 / 타자를 칠때마다 실행된다

  useEffect(() => {
    console.log("I counter changes"); // 새로고침할때마다 최초 한번만 실행하고
  }, [counter]); // counter 만 지켜본다는 뜻 / 버튼을 누를때 마다 실행된다

  return (
    <body>
      <input
        value={keyword}
        onChange={onChanges}
        type="text"
        placeholder="next.."
      />
      <h1>{counter}</h1>
      <button onClick={onClicks}>Click Me</button>
    </body>
  );
}

export default App;