Monsters-Rolodex 2-3 | useEffect | Fetch API

외부 API에서 몬스터 이름을 불러와

useState를 사용해 array 안에 담는 작업을 해보자. 

외부 API를 불러오기 위해 fetch 함수를 이용해 데이터를 불러온다. 

 

아래 처럼 fetch 함수를 바로 사용해서 데이터를 불러오면 문제가 발생한다. 

 

 

 

render가 얼마나 일어나고 있는지 콘솔로그로 확인하면 

 

 

render가 끝없이 일어나는 것을 볼 수 있다. 

 

이유는 fetch로 외부의 데이터를 불러오는데

매번 불러올 때마다 리액트는 렌더를 다시 한다. 

그 때마다 데이터를 새로 저장하여 가리킨다. 

이미 똑같은 데이터가 있다하더라도 같은 메모리로 보지 않는다. 

값이 같은 게 중요한 게 아니라 같은 곳을 포인팅하고 있어야 하는데 그렇지 않다는 것이다. 

 

더 문제는 fetch 함수 자체만 따로 isolate해서 렌더할 수 없고 

App 함수 전체가 매 번 render를 해야한다. 

 

fetch --> 함수 안 코드 모두 읽고 -> 함수 전체 리랜더

무한 루프 

 

 

우리는 fetch 무한 루프를 끊어야 하는데

이 때 side effect를 사용한다. 

useEffect hook을 사용해서

functional component에서 Side Effect를 사용할 수 있다. 

 

 

 

함수가 위에서부터 아래로 실행이 될 때

state안의 variable이 같은지 다른지 확인 하는 것은 중요하다. 

 

 

 

---

 

에러 프로그램 끄는 법

window bar에서 window 누르고 

 

 

Task Manager로 가서 해당 프로그램 끄기 

 

 

 

---

 useEffect hook 

 

2개의 argument를 받는다. 

1. ( ) => { } 콜백 함수 : 할 일 

2. [ ] array of dependency : mostly state of values, props value..

 

 

 

App 함수가 처음 mount 했을 때 콜백 함수가 맨 처음 한 번 돌아간 후

그 다음부터는 array 안 value가 바뀌면 그 때서야 콜백 함수가 동작하도록 되어 있다. 

 

array를 빈 칸으로 비워두면

맨 처음에만 useEffect 돌리고 그 뒤로는 안돌리겠다는 의미다. 

그 뒤로 아무런 변화가 없으니 앞으로 useEffect를 trigger 할 껀 없을거야. 

 

 

 

useEffect를 완성하고 render가 몇 번되는지 보자. 

 

빈 array 일 때 한 번

fetch가 되고 나서 한 번

이렇게 2 번 된 것을 볼 수 있다. 

console.log

 

확인 차 input에 내용을 넣으면  re-render가 되지만 re-fetch는 되지 않는다.

 

 

---

filteredMonsters도 useEffect로 

 

App 함수가 처음부터 끝까지 읽힐 때 

monsters array에 변화된 것이 없어도

이 filteredMonsters array는 매 번 새로 만들어진다.

 

 

state가 변하면 re-render가 되기에

filteredMonsters array는 그 때마다 새로 만들어진다. 

 

한 번 확인을 해보고자 SearchBox를 하나 더 만들고, 그 안에 내용을 입력해 state를 변경해 보자. 

그리고 콘솔에 filteredMonsters 를 보면 

 

 

 

 

 

 

 

한 글자 입력할 때 마다 state 변경이 되어 render가 되니 

매 번 filteredMonsters array가 rebuilt 되는 것을 볼 수 있다. 

 

 

 

이렇게 불필요하게 rebuilt가 되지 않도록 

filteredMonsters를 useEffect 안으로 넣어준다.

monsters array가 변하거나, searchField 내용이 변할 때만 트리거 되도록 한다.