[React] #12 useEffect, fetch()로 API 호출

useEffect 사용 이유

생명주기

렌더링 후(화면에 요소들을 다 그린 후?)
useEffect 내부 함수를 호출한다

첫 번째 인자 callback 함수로 호출할 함수를,
두 번째 인자 deps 자리의 배열에는 '지켜볼 값'을 넣어둔다.(의존성 배열)
배열 안에 들어가있는 count가 변경될 때만 함수가 실행된다.

두 번째 매개변수에 '지켜보는 값'을 넣는다는 것은,

두 번째 매개변수가 없다면, 변경되는 모든 값에 useEffect가 반응해서 (첫 번째 맥변수인)함수를 실행시킨다.
두 번째 매개변수가 필요한 이유
count가 변경됐을 때만 useEffect가 실행된다

useEffect로 API를 호출할 경우

한 번만 호출할 것이기 때문에
두 번째 인자에는 빈 배열을 넣으면 된다

빈 배열을 넣는 경우 vs 배열에 값을 넣는 경우
렌더링이 되고나서 최초 딱 한 번만 API를 호출하면 된다.
이때는 빈 배열을 넣으면 된다.

'값이 변할 때마다' 계속해서 함수를 호출해야하는 경우에는
배열 안에 '지켜볼 값'을 넣으면 되고

API 호출

비동기 통신을 위해 fetch 이용

// res : http응답
// fetch('') // promise 반환
// .then() // 반환된 promise를 then으로 처리
res.json() // json으로 변형하여 promise 반환

useParams(); // 주소창에 있는 문자열이 들어옴
// 그중 day 부분만 추출해온 것

궁금한 점

바뀔 때마다 API를 호출하는 것도 아닌데, 왜 useEffect 안에서 API를 호출하지?