[react] useEffect()

728x90

state

props

.

.

 

특정 코드들이 첫 번째 component render에서만 실행되게 하자.

처음 한 번만..!!

나중에는 상태가 변해도 실행되지 않도록.

우리가 state를 변경할 때 모든 code가 다시 실행된다. 

하지만 그럴 필요가 없을 경우!! 어떻게 해야할까?

useEffect를 사용한다. 이 useEffect는 두 개의 argument를 가지는데, 첫 번째는 우리가 딱 한 번만 실행하고 싶은 코드이다.

ex) useEffect(function1, [])

두번째는 ... 마법같다....?

 

결국, useEffect에 대해 배웠다. 이 함수는 계속 실행되지 않도록 하는 것. 

한 번만 실행해도 되는 것들을 다루는 함수이다.

 

두 번째 argument는..

이럴 때 사용한다. 특정한 부분이 변했을 때만 다시 찍히도록 하고 싶은 경우!

예를 들어, 검색 창에서 문자를 검색하고, 검색 아이콘을 누른다면 같은 단어를 입력하고 그 상태에서 버튼을 여러번 클릭하면 클릭 할 때마다 상태가 변한다. 즉, 텍스트 필드는 변하지 않지만 버튼을 눌렀기 때문에 계속 찍어내는 것이다.

버튼을 누름으로써 counter가 변화할 때도 영화를 검색하고 있는 것이다.

이 때 다음과 같이 코드를 작성하면 된다.

useEffect(() => {
 console.log("SEARCH FOR", keyword); //keyword가 변화할 때만 실행된다.
}, [keyword]);

이렇게 하면 keyword가 변화할 때 코드를 실행할 거라고 react.js에게 알려주는 것이다.

 

우리가 두 번째 argument를 []로 비워뒀을 때 한 번만 실행됐던 이유는 비어있으므로 지켜볼 변화가 없기 때문이다.

즉, 두 번째 argument를 채우면, '해당 argument가 변화하는지 지켜봐줘' 라고 말하는 것과 같다.

 

---

복습!!!!

리엑트에서는 새로운 데이터가 들어올 때마다 UI를 refresh 한다는 특징이 있다.

그래서 우리가 직접 하지 않아도 되므로 편하다.

하지만! 한 번만 실행하고 싶은 코드가 있는 경우, 혹은 한 번만 실행해야 하는 경우! 어떻게 해야하는가!!

이 때 useEffect를 사용하면 된다.
이 함수는 두 개의 argument를 갖는데,

첫 번째 argument는 우리가 실행시키고 싶은 코드이고,

두 번째 argument는 dependencies라고 불린다. 이는 react.js가 지켜봐야 하는 것이다. 이것이 변화할 때 첫 번째 argument를 refresh 하는 것이다. 

 두 번째 argument는 array이므로 여러 개의 component를 넣어도 된다.

 

결론

useEffect는 원하는 state이 변할 때만 원하는 코드를 실행할 수 있다!!

react.js는 변화가 있을 때마다 refresh 하는데, useEffect를 사용해서 원하는 경우에만 refresh 할 수 있다.

 

 

 

 

[ 필수는 아니지만, 자주 쓰이는 것은 아니지만 ]

Cleanup function

이 함수는 그냥 함수인데, 우리의 component가 destroy될 때 뭔가 할 수 있도록 해주는 것이다.

Cleanup function은 따로 이 이름의 함수가 있는 것이 아니라 useEffect에서 component가 없어질 때 무언가를 return하는 것.

이는 component가 없어질 때 어떤 분석 결과를 보내고 싶은 경우 사용할 수 있다.

이를 통해 언제 component가 create 됐는지, 언제 destroy 됐는지 알 수 있다.

function Hello() {
 function byFn() {
  console.log("bye :(");
 }
 function hiFn() {
  console.log("created :)");
  return byFn; // React.js가 hiFn을 실행하고, hiFn이 파괴될 때 byFn을 실행한다.
 }
 useEffect(hiFn, []);
 return <h1>Hello</h1>;
}

 

물론 문자 그대로 적을 수도 있다.

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

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