노마드코더 ReactJS #6.0~#6.4

#6.0 Introduction

기본적으로 state가 변화할 때 component 내부의 전체 코드가 다시 실행된다. 특정 코드들이 첫 번째로 render 할 때만 코드가 실행되고 다른 state의 변화에는 실행되지 않도록 하고싶다면. 예를 들어, API를 통해 데이터를 가져올 때 첫 번째 render에서만 가져오고 state가 변화하더라도 데이터를 다시 가져오고싶지 않은 등의 경우. 이번 장에서는 이러한 문제를 다룰 것이다.

#6.1 useEffect

앞서 말한 문제를 useEffect라는 함수를 사용해 처리할 수 있다.
useEffect는 두 개의 argument를 가지는 function이다. 첫 번째 argument는 한 번만 실행하고 싶은 코드이고, 두 번째 argument는 비어있는 array를 넘겨주면 되는데, 이에 대해서는 나중에 살펴보자.

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev+1);
  console.log("i run all the time.");
  useEffect(() => {
    console.log("i run only once.");
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

useEffect의 첫 번째 인자인 함수는 처음 한 번만 실행되고 state가 변화해도 다시 실행되지 않는 것을 확인할 수 있다.

#6.2 Deps

  useEffect(() => {
    console.log("i run only once.");
  }, []);
  useEffect(()=>{
    console.log("I run when 'keyword' changes.");
  }, [keyword]);

  useEffect(()=>{
    console.log("I run when 'counter' changes.");
  }, [counter]);

  useEffect(()=>{
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]);

useEffect 두 번째 인자의 비밀! 특정 state가 변경되었을 때 코드가 실행되도록 설정할 수 있다.

#6.3 Recap

useEffect 복습!

#6.4 Cleanup

function Hello(){
  function byFn(){
    console.log("bye :(");
  }
  function hiFn(){
    console.log("created :)");
    return byFn;
  }
  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>
  )
}

useEffect의 첫 번째 인자 함수(hiFn)가 어떤 함수(byFn)를 return하도록 하면, 해당 component가 destroyed될 때 byFn이 실행되도록 할 수 있다.

function Hello(){

  useEffect(() => {
    console.log("hi :)");
    return () => console.log("bye :(");
  },[])
  return <h1>Hello</h1>;
}

보통은 이렇게 간단하게 쓴다!