useEffect ?

useEffect

yeeffect가 아니라 effect다

state가 변화할때 모든 component는 다시 실행되고, 모든 code 들도 다시 실행된다.

하지만 component 내부의 몇몇 코드는 처음 딱 한번만 실행되게 하고 다시 실행시키고 싶지 않을때가 있다.

예를 들어 api를 호출했을때 딱 한번만 실행 되는것 처럼 말이디....

그걸 위해서 react 팀이 개발해 놓은게 있어 바로 useEffect임

useEffect를 사용하기에 앞서 먼저 import를 해줘야해 react를 사용한다면 당연히

import { useState } from "react"; 

여기를

import { useState, useEffect } from "react";

이렇게 수정해보자

import는 이게 끝

---

이제 이걸 어떻게 사용 하느냐

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>
  );
}

export default App;

위와 같이 useEffect안에 익명의 function을 만들어서 사용가능해

useEffect funtion은 쉽게 말해서 우리코드가 딱 한번만 실행될 수 있도록 보호해줘.

잠깐 그리고 내가 설명 안 한게 있을거야 useEffect funtion뒤에 [] <-- 이거 말이야

이게 뭔지 알려줄 시간이야

[]안에 아무것도 안들어가 있으면 최초 1회만 코드가 실행

[] 안에 value 값을 넣으면 그 value값에 변동이 있을때만 실행되게 하는거야

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");

  useEffect(() => {
    console.log("CALL THE API.....");
  }, []);
  useEffect(() => {
    console.log("Search for", keyword);
  }, [keyword]);
  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search"
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me </button>
  );
}

export default App;

봐 이 코드에서 2번째 useEffect에

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

state의 value 값인 keyword를 넣었어
이제 저 검색창(input)은 keyword값의 변동이 없는이상 실행이 되지 않는거야

근데 저 검색창은 아직 불완전해

왜냐면 처음시작이 될때도 검색이 되고 있거든

그래서 저부분을 수정할거야

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

keyword가 빈값이 아니고 글자수가 6이상일때 검색 되도록

[]에 value가 꼭 하나만 들어갈 수 있는것도 아니야 원한다면 여러개를 쓸 수 도 있어.
[counter, keyword] 이런식으로 만약 이렇게 쓴다면 두 value중 하나만 바뀌어도 코드가 실행되겠지?

이렇게 우리는 useEffect에 대해서 배워봤어
1. componet가 처음 실행될 때
2. value가 update 될때
에 한해서 코드를 실행하도록 제한 하는것!

---

그리고 마지막으로..

Cleanup funtion에 대해서 설명할게

Cleanup funtion은 컴포넌트가 파괴 될 때 뭔가 할수 있도록 도와주는 기능이야

예를 들어서 누군가는 컴포넌트가 없어질때 어떤 분석결과를 보내고 싶어하거나 event listener를 지우거나 혹은 console.log에 뭔가를 표시하고 싶을 수도 있어

중요한건 컴포넌트가 언제 생성되고 언제 파괴됬는지 알 수 있는거야