useEffect()

useEffect()

코드를 한 번만 호출하는 함수

import{useEffect} from "react";

useEffect(한 번만 실행하고 싶은 코드, 배열);

ex)

const [counter, setValue] = useState(0);
const onClick = () => setValue((prev) => prev + 1);
console.log("I run all the time");
useEffect(() => {
  console.log("CALL THE API...");
}, []);

결과(console)

click할 때 마다 "I run all the time"은 실행되지만, "CALL THE API...."는 처음 한 번만 실행됨

---

useEffect(2)

[배열]안에 적용하고자 하는 변수를 지정할 수 있다.

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

keyword가 onChange에의해 변할 때 마다 코드를 실행한다. 배열이 비어있는 경우에는 처음 한 번만 실행된다.

ex

 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 change");
  }, [keyword, counter]);

result

1,2,3,4 줄은 시작과 동시에 한 번씩 실행된 모습이며, 5,6 줄은 search칸에 입력했더니 실행된 모습이다.