[REACT] useEffect

App.js

import "./App.css"; 
import Effect from "./Effect"; //Effect.js 

function App() {
  return (
    <div>
      <Effect />
  );
}

export default App; 

Effect.js

import { useEffect, useState } from "react";

function Effect() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState("");

  useEffect(() => {
    console.log("CALL API");
  }, []);

  useEffect(() => {
    console.log("CHANGE COUNT", count);
  }, [count]);

  useEffect(() => {
    console.log("CHANGE KEYWORD, COUNT", keyword, count);
  }, [keyword, count]);

  console.log("UI REFRESH");
  const onClick = () => {
    setCount(count + 1);
  };

  const onChange = (event) => {
    console.log(event.target.value);
    setKeyword(event.target.value);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={onClick}>+1</button>
      <input value={keyword} onChange={onChange} />
      <h1>{keyword}</h1>
    </div>
  );
}

export default Effect;

결과

분석

우선 import로 "로 표시한 react라는 경로에서 useState와 useEffect 라는 라이브러리를 모듈로 가져와 쓴다는것이다.
export는 이와 반대로 지금 Effect.js모듈을 밖으로 보낸다는것이다.

먼저 Effect라는 함수를 정의해주고 그 안에 문장을 써준다.

useEffect의 문법은 useEffect(()=>{내용}, [조건]); 이다.

[]안에 있는 요소 조건이 맞을 시 해당 조건이 있는 Effect함수로 넘어가 랜더링이 끝나기 직전에 실행된다. 따라서 실행 결과는 코드에 적혀진 순서대로
CALL API
CHANGE COUNT
CHANGE KEYWORD,COUNT
UI REFRESH
가 아닌 다음과 같다.

+1버튼을 눌러줬을때는 다음과 같다.

CALL API를 제외한 count 변수가 들어간 문장과 그 결과값이 출력된다.

만약 처음으로 돌아가 이번에는 문자만 출력한다면

출력한 문자와 keyword 변수가 들어간 문장과 그 결과값이 출력된다.