[SEB_FE_44] React(5) - Effect Hook

유영준·2023년 4월 3일
post-thumbnail

오늘 배운 주제


  • Side Effect
  • Effect Hook

오늘 배운 내용


  • Pure Function (순수 함수)

순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없습니다. 또한 순수 함수는, 입력으로 전달된 값을 수정하지 않습니다.

  • useEffect
    useEffect의 첫 번째 인자는 함수
    useEffect의 두 번째 인자는 배열 => 어떤 값의 변경이 일어날 때를 의미

오늘의 과제


StatesAirline Client - Part 2

  • Main.js
useEffect(() =>{
    setIsloading(true)
     getFlight(condition)
     .then(filtered =>{
       setFlightList(filtered)
       setIsloading(false)
      })
   }, [condition])
const [isloading, setIsloading] = useState(false);

{ isloading ? <LoadingIndicator /> : <FlightList list={flightList} /> }

```s

- FlightDataApi.js

```js
let url = "http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN";
  if(filterBy.destination) {
    url = `${url}&destination=${filterBy.destination}`;
  }
  return fetch(url).then((res) => res.json())
profile
프론트엔드 개발자 준비 중

0개의 댓글