React Effects - useEffect

useEffect는 이때 사용해여.

state함수처럼 코드가 변경될 때 앱내에서 렌더링을 하는데, 이때 특정코드의 실행을 제한시키고 싶을때가 있을꺼임. 예를들어 API를 썼는데 rendering할 때 마다 실행시킬 순 없잖아여. 당연한소리지만 비효율적임. 이런경우 api 컴포넌트가 맨 처음 render될 때만 실행시키고 싶어. 이때 쓰는게 useEffect이다. 다시말해, 코드를 딱 한번만 실행시키고 네버 에버 두 잇 어게인 할때 씀.

import styles from "./App.module.css";
import { useState, useEffect } from "react"; //state, effect import 해줌
function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((cur) => cur + 1);
  console.log("I run always no matter what");
  useEffect(() => {
    console.log("calling API"); //요기를 집중하란 말이얄.
  }, []); 
  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}
export default App;

[새로고침 직후 개발자도구 콘솔창]

새로고침 이후에 (첫 render이후) button을 11번 더 클릭했지만 calling API는 호출이 안된걸 볼 수 있음.

useEffect(() => {console.log("calling API");}, []);근데 여기서.....
useEffect의 두번째 인자에 들어간 비어있는 배열([])은 뭘까??? 이해를 위해 input창을 만들고 onChange 함수에 input value를 출력하게끔 만들어보쟈.

import styles from "./App.module.css";
import { useState, useEffect } from "react";
function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((cur) => cur + 1);
  const [keyword, setKeyword] = useState("");
  const onChange = (event) => setKeyword(event.target.value);
  console.log("I run always no matter what");
  console.log("searching~", keyword)
  useEffect(() => {
    console.log("calling API");
  }, []);
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      ></input>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

ㅇㅋㅇㅋ. input에 검사를 했을때도, 버튼을 클릭했을때도

console.log("I run always no matter what");
console.log("searching~", keyword)

두코드 전부 render되는게 확인된다.

내 코드의 state가 변화했을 때 원하는 특정 코드만 실행시키는것 까지 useEffect가 해준다.
그 일을 하는게 비어있는 배열([]) 이거란 말이죠.

  useEffect(() => {
    console.log("searching~", keyword);
  }, []);

위 코드는 새로고침됐을 때 딱 한번만 실행되는 코드죵?
키워드가 바뀔때마다 render되게 하려면?

  useEffect(() => {
    console.log("searching~", keyword);
  }, [keyword]);

비어있는 배열([]) 여기에다가 변화되는 변수(여기선 [keyword])를 넣어주면 끝!

hello 를 input에 입력했을때와, 버튼만 11번 클릭했을때 차이를 볼 수 있다. 크~
비어있는 배열은 React코드가 감시하는 변수가 없기때문이다. 잡아낼께 없어서, 새로고침될 때 딱 한번 실행되는거다.
그리고 밑에 배열에는 keyword가 바뀔때 마다 React코드가 잡아내는거임 ㅎ

참고![알아보기쉽게 3종류로 나눠서 구분함]

import styles from "./App.module.css";
import { useState, useEffect } from "react";
function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((cur) => cur + 1);
  const [keyword, setKeyword] = useState("");
  const onChange = (event) => setKeyword(event.target.value);

  useEffect(() => {
    if (counter !== 0) {
      console.log("I run when counter changes");
    }
  }, [counter]);
  useEffect(() => {
    console.log("I run only once");
  }, []);
  useEffect(() => {
    if (keyword !== "") {
      console.log("I run when key word changes");
    }
  }, [keyword]);
  useEffect(() => {
    if (keyword !== "") {
      console.log("I run whatever you change counter and keyword");
    }
  }, [keyword, counter]);
  
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search here..."
      ></input>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;