react.js 기본 (노마드 강의) - useEffect

• 개요 : state 가 변할 때 마다 렌더링 되는데 경우에 따라 component가 처음 render 될 때에만 코드가 실행 되길 원할때

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

• 예를 들어 API 를 불러온다 했을 때 component render 에서 AIP를 call 하고 이후에 state가 변할때 마다 그 API를 계속 불러오는것을 원치 않을 것.

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("render");
  const iRunOnlyOnce = () => {
    console.log("iRunOnlyOnce");
  };
  useEffect(iRunOnlyOnce, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

• useEffect 는 기본적으로 코드를 한번만 불러올수 있게 한다.

이벤트가 두군데에서 일어난다 했을때 해당 이벤트가 사용된만 렌더링 하고 싶다면?

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  console.log("i run all the time");

  const iRunOnlyOnce = () => {
    console.log("iRunOnlyOnce");
  };

  useEffect(iRunOnlyOnce, []);
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("search for " + keyword);
    }
  }, [keyword]);

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search"
      ></input>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

• useEffect(function, []) 두번째 인자에 []해당 변화하는 state 값이 변화할때만 코드를 실행 할거란 변수를 담는다. []가 비어있다면 지켜볼게 아무것도 없으니 하나만 실행 되는것.

clean up

-컴포넌트가 destroyed 될때, maybe 컴포넌트가 사라질때 analysis 결과를 보내거나 분석 API 를 보내겟지 evnent listner 를 하거나 사용 된다.

function Hello() {
  useEffect(() => {
    console.log("created :)"); 
    //처음 한번만 실행 하지만 아래 ui 처럼 클릭 할때마다 실행 create, destroy 될때마다
    return () => console.log("destroyed :("); //cleanup function
  }, []);
  return <h1>Hello</h1>;
}

• 위 내용을 풀어서 본다면 아래와 같다.

function Hello() {
  function byeFn() {
    console.log("bye :<");
  }
  function hiFn() {
    console.log("hi :)");
    return byeFn; //리턴 값이 있기 때문에 한번만 실행..?
  }
  useEffect(hiFn, []);
  return <h1>Hello</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => {
    setShowing((prev) => !prev);
  };

  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "hide" : "show"}</button>
    </div>
  );
}

export default App;