본문 바로가기

React

[React] useEffect

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

useEffect

두가지 argument를 가지는 function

  1. 첫번째 argument : 우리가 실행시키고 싶은 코드
  2. 두번째 argument: dependencies : react.js가 지켜보아야할 코드

keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려준다.

이것이 바로 빈 array를 주었을 때는 코드가 단 한번만 실행된 이유. 왜냐면 변화하는 부분이 없기 때문에

useEffect(() => {
    console.log('I run only once.')
  }, []);

그리고 변화할 코드는 여러가지를 작성해줄 수 있다.

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

이럴때는 keyword 혹은 counter가 변화할때 코드를 실행한다.