なぜ[REACT]useEffectを使うのか

こんにちは.😄 今日はUSEffectを使う理由を学びました

useEffect(effect: React.EffectCallback,React DependencyList) : void

1番目のパラメータは実行したいコードで、2番目のパラメータはreactです.jsが注目しなければならないものが入ってきました.これらの変化時の反応.js運転コード

import { useState , useEffect } from "react";
  
function App() { //app함수의 반환값이 많아지면 소괄호로 감싼다
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev)=>prev + 1);
  console.log("i run all the time");
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>clickme</button>
    </div>
  );
}

export default App;

この状態でreactを実行して結果を表示します.

毎回このように動作しているのが見えます.これは,apiをロードすると状態が変化し,apiをロードすることが非常に非効率であることを示している.この問題を解決するには、userEffectを使用します.

import { useState , useEffect } from "react";
  
function App() { //app함수의 반환값이 많아지면 소괄호로 감싼다
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev)=>prev + 1);
  console.log("i run all the time");

  useEffect(() => {
    console.log("CALL THE API...")
  },[]); //component가 처음 render할 때 실행되고 다시는 실행되지 않을 function을 넣어준다.
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>clickme</button>
    </div>
  );
}

export default App;

useEffect(() => {
    console.log("CALL THE API...")
  },[]); //component가 처음 render할 때 실행되고 다시는 실행되지 않을 function을 넣어준다.

これで、userEffectを追加したコードを実行できます.

userEffectでは、コンポーネントの最初の作成時にのみ実行できるコードが表示されます.
2番目のパラメータに依存項目が追加されていないため、react.jsにはターゲットがなく、コードは1回しか実行されません.

const [keyword,setKeyword] = useState("");
const onChange = (event) =>setKeyword(event.target.value);

componentで新しい関数を作成し、return文inputとして追加します.

<input 
      value={keyword}
      onChange={onChange} type="text" placeholder="Search here..."/>

useEffect(() => {
    if(keyword !== "" && keyword.length >5){
      console.log("I run when 'keyword' changes.");
    }
  },[keyword]); //keyword가 변할때만 실행되는 코드
  useEffect(() => {
    console.log("I run when 'counter' changes. ");
  },[counter]); //counter가 변할때만 실행되는 코드
  useEffect(() => {
    console.log("I run when 'keyword'&'counter' changes. ");
  },[keyword,counter]); //여러개의 속성이 변할때 실행되게 할 수 있음

useEffectの2番目のパラメータdependencyに反応する.jsに加わるには注目すべきもの.

これにより、目的の関数のコードのみが再実行されることを確認できます.

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

このようにして、関数の終了時に関数を返すことができます.