[ZOOM]221207 zoom react

December 7, 2022

React 함수 컴포넌트
Pure Function
항상 동일한 input, 동일한 output
props를 받아서 JSX를 출력

setTimeout, localStorage, fetch API - 리액트의 Side Effect
컴포넌트의 순수함수 특징에 위배되는 기능들

이러한 Side Effect들을 useEffect로 관리하도록 한다

리엑트 라이프 사이클 찾아보자

과제

if (typeof window !== "undefined") {
  localStorage.setItem("flight", JSON.stringify(flightList));
}

브라우저가 랜더링 되고 난 후에 안에 내용을 실행하겠다.

if문은 무엇을 뜻하는가

function getFlight(filterBy = {}) {}

filterBy = {} => 함수에 인자가 들어오지 않는다면 빈객체를 인자로 하겠다.
설정하는 이유 - 인자를 받아서 인자를 사용해서 어떤 로직을 구현해야 하는데 없을 경우에는 undefined가 뜨기 때문에

.json() - fetch후 받아온 응답 객체 안에 json 포맷으로 작성이 되어 있다. 이것을 자바스크립트에서 사용할 수 있게 바꿔주는 역할

참고