[React] State, Effect Hook 활용하기 (2) Rest API fetch (StateAirline Client 과제)

무서운 속도로 불어나던 에러...

---

✅ TIL

오늘은 useEffect로 REST API를 불러오는 게 주 과제였다.

막상 내 손과 머리로 만들어보려고 하니까
어디서부터 건드려야 할지도 모르겠고 막막했다...

페어님의 도움으로 겨우 해결하긴 했으나 아직 많이 부족한 상태다.

React 클론코딩 프로젝트를 하면서 익히려고 공부 계획을 세우고 있다..!
화이팅....!!

---

기억하자

일단 무조건 컴포넌트 구조부터 파악하자
구조를 알아야 state 끌어올리기, props 전달하기를 하던가 말던가 한다.
누가 어디서 무엇을 주고 받는지 숙지가 되어야 코드를 작성한다.
처음에 그냥 머릿속으로 생각하면서 하다가 복잡해지니까 헷갈려서 공책에 지도를 그리면서 했다.

---

React는 단방향 데이터 흐름이 핵심이다.

하나의 데이터에 영향을 받는 두 컴포넌트는 공통 부모 컴포넌트에 state를 위치시켜서
부모 컴포넌트에서 state를 관리하게 한다.

State 끌어올리기는 단방향 데이터 흐름 원칙을 따른 방식이다.
state 자체를 변경하는 게 아닌, state 변경 함수를 props로 전달하여 자식 컴포넌트에서 실행하고 부모 컴포넌트의 state 값이 변경된다.
부모 컴포넌트에서 useState를 사용하는 것이다.

---

Effect Hook

Side effect

부수 효과
컴포넌트의 순수함수적인 특징에 위배되는 기능들
ex) 네트워크 요청, 타이머 API, REST API

순수함수 : 함수 내부에서 외부 상태를 직접 참조하지 않는다.

useEffect

useEffect(함수, [deps])

종속성 배열 dependency array

종속성이 변경됐을 때 side effect 함수가 실행된다.

빈 배열이면 컴포넌트 Mount시에만 함수를 실행한다.

종속성이 없으면 컴포넌트 Mount, props와 state 변경시 함수를 실행한다.

side effect는 무조건 Effect Hook으로 관리해야 한다.

---

AJAX 요청

비동기 네트워크 요청
= side effect
= useEffect로 처리

json

response(ReadableStream)를 읽을 수 있게(사용할 수 있는 객체로) 변환해주는 게 .json() method

---

export function getFlight(filterBy = {}) {
  ...
}

함수 컴포넌트의 매개변수에 props = {}로 들어오는 것은
props가 undefined일 경우 {}으로 들어오는 것
= default값

---

  useEffect( () => {
    setIsLoading(false)
    getFlight(condition).then(response => {
      setFlightList(response)
      setIsLoading(true)
    })
  },[condition])

API요청 후 로딩화면 구현시
로딩화면 출력 -> side effect 함수 -> then 안에 (해당 API 데이터를 사용하는 함수 작성 후, 로딩 화면 없애기)

비동기 함수이기 때문에 then으로 작성해야 무조건 getFlight 이후에 실행이 되는 것이고
then 밖에서 작성하면 비동기로 진행돼서 한번에 끝나서 구현이 안된다.