20221012 TIL

오늘 배운 것

• Effect Hook (useEffect)
• (과제) StatesAirline Client - Part 2

간단 정리

리액트 컴포넌트의 라이프사이클

• mounting(컴포넌트가 화면에 나타남) - updating(리렌더링) - unmounting(화면에서 사라짐)
• 리액트는 각 라이프사이클 주기마다 수행할 수 있는 메소드가 있다.
  • mounting: ComponentDidMount / updating: ComponentDidUpdate / unmounting: ComponentWillUnmount
• 이러한 메소드는 원래 클래스형 컴포넌트에서만 사용이 가능했는데, 이를 함수형 컴포넌트에서도 사용하기 위해 React Hook을 사용하는 것이다. (useState, useEffect, useRef 등)
• 굳이 훅까지 사용해가면서 함수형 컴포넌트를 쓰는이유?
  • 클래스형 컴포넌트의 길어지는 코드 길이 문제
  • 중복코드, 가독성 문제 등등을 해결하기 위해 등장

useEffect

기본형태

useEffect(( ) => {
콜백함수}, [의존성 배열]);

• <컴포넌트가 마운트되는 시점을 제어>

  • 의존성 배열 내에 들어있는 값이 변화하면 콜백 함수가 실행된다.
  • 의존성 배열이 []이면 컴포넌트가 처음으로 생성될 때만 useEffect 함수가 실행된다.

• <컴포넌트가 업데이트(렌더링)되는 시점을 제어>

  • 컴포넌트가 업데이트되는 조건: state 변경 / 부모 컴포넌트로부터 받은 props 변경 / 부모 컴포넌트가 리렌더링될 때
  • 의존성 배열 자리에 아무것도 넣지 않으면 컴포넌트가 렌더링될 때마다 useEffect 함수가 실행된다.

과제 - 제일 막혔던 부분

///FlightDataApi.js
export function getFlight(filterBy = {}) {
  return fetch(
    `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN&destination=${filterBy.destination}`
  ).then((res) => {
    return res.json();
  });
}
//parameter에 전달 받은 객체에서 destination(key)을 이용해 가져온 value를 fetch에 들어갈 url의 query parameter에 전달한 후, json 형태의 데이터로 반환

//Main.js
  useEffect(() => {
    setIsLoading(true);
    getFlight(condition).then((data) => {
      setFlightList(data);
      setIsLoading(false);
    });
  }, [condition]);
  //getFlight 함수에 전달인자로 condition을 전달하여 반환된 json 데이터를 .then()을 사용, setFlightList 함수로 flightList state를 변화시킴. 

• getFlight 함수가 하는 역할은 fetch로 json 데이터를 반환하는 것까지라, 이 데이터를 전달받아서 다른 일을 하려면 .then()으로 연결해주어야 했는데 생각이 잘 나지 않았음.

느낀 점

• 제발 이 마음 이대로 유지해서 작심삼일만 아니게 해보자고 응응 알지
• useEffect 자체는 그렇게 어렵지 않았는데 과제가 너무... 어려웠다... ㅠㅜㅠ