[React] 실습 - StatesAirline Client

codeStates front-end/React 2023. 2. 4. 16:52

📌 StatesAirline Client

📖 학습 목표

Part - 1

[React] 데이터 흐름

📌리액트 데이터 흐름 📍단방향 데이터 흐름( one-way data flow ) React는 페이지 단위가 x -> 컴포넌트 단위 컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 컴포넌

hwantech.tistory.com

Part - 2

[React] Effect Hook

📌Effect Hook React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정 🔗Side Effect (부수 효과) React에서 컴포넌틑 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할

hwantech.tistory.com

Part 1 - Test

Main 컴포넌트 내 search 함수는 검색 조건을 담고 있는 상태 객체 condition을 업데이트해야 합니다

  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      console.log('condition 상태를 변경시킵니다');

      // TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.
      
    }
  };

condition을 업데이트 -> state의 상태를 갱신해야한다

condition의 초기값은 departure: 'ICN' 출발 정보만 담겨 있음

이 말은 출발지는 ICN으로 정해져 있고 destination은 정해지지 않았다

이를 업데이트 해주기 위해선 setCondition으로 condition 값을 바꾸어 줘야 한다

  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      console.log('condition 상태를 변경시킵니다');

      // TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.
      setCondition({departure, destination})
    }
  };

Search 컴포넌트에는 상태 변경 함수 search가 onSearch props로 전달되어야 합니다
상태 변경 함수 search는 Search 컴포넌트의 검색 버튼 클릭 시 실행되어야 합니다

이 때, 생각해야하는 부분

Parent Component -> main

A Component -> search

search 컴포넌트가 자식인데 부모한테 어떻게 props를 전달하지? 분명 부모에서 전달한다고 했는데,,,

👉🏻👉🏻👉🏻 이를 상태 끌어올리기

사실상, search 함수에 모든 검색기능이 들어있어야하기 때문에 대부분이 상태들이

search 함수에 정의되어있다 그러므로 상태 끌어올리기로 main으로 전달해주어야 한다.

Search.js

import { useState } from 'react';

{/* Search 컴포넌트에 onSearch라는 props로 search함수를 전달한다*/}
function Search({onSearch}) {
  const [textDestination, setTextDestination] = useState('');

Main.js

return (
    <div>
      <Head>
        <title>States Airline</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>여행가고 싶을 땐, States Airline</h1>
        <Search onSearch={search}/>
        // 상태 끌어올리기로 props를 전달
        <div className="table">
          <div className="row-header">
            <div className="col">출발</div>
            <div className="col">도착</div>
            ...(생략)

Part 2 - Test

검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다
getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다

검색 조건이 바뀐다는 것은 -> 상태가 변한다는 것

sideEffect 처리, side effect를 실행하기 위해서 useEffect를 사용한다

getFilght 결과도 받아 같이 업데이트

  // TODO: Effeck Hook을 이용해 AJAX 요청을 보내보세요.
  // TODO: 더불어, 네트워크 요청이 진행됨을 보여주는 로딩 컴포넌트(<LoadingIndicator/>)를 제공해보세요.
  // useEffect(() => {

  useEffect(() => {
    getFlight(condition)
  }, [condition] 
  )

getFlight 요청이 다소 느리므로, 로딩 상태에 따라 LoadingIndicator 컴포넌트를 표시해야 합니다

외부 API를 사용할 경우 접속이 느린 경우가 있기에 로딩화면 구현은 필수다

loading state 처리 초기값은 로딩중이 아니기 때문에 false를 주어야한다.

  // TODO: Effeck Hook을 이용해 AJAX 요청을 보내보세요.
  // TODO: 더불어, 네트워크 요청이 진행됨을 보여주는 로딩 컴포넌트(<LoadingIndicator/>)를 제공해보세요.

  const [isLoading, setIsLoading] = useState(false)
  // useEffect(() => {

  useEffect(() => {
    getFlight(condition)
  }, [condition] 
  )

<Search onSearch={search}/>
        <div className="table">
          <div className="row-header">
            <div className="col">출발</div>
            <div className="col">도착</div>
            <div className="col">출발 시각</div>
            <div className="col">도착 시각</div>
            <div className="col"></div>
          </div>
          //이제 api를 이용해서 list를 받을 것이기 때문에 filterByCondition는 주석 처리 해준다
          {/* <FlightList list={flightList.filter(filterByCondition)} /> */}
          // 로딩중이면 LoadingIndicator 컴포넌트, 로딩중이 아니면 flightList 컴포넌트 출력
          {isLoading ? <LoadingIndicator /> : <FlightList list ={flightList } /> }
        </div>

로딩화면이 돌아갈수 있도록 useEffect에 추가 구현

  useEffect(() => {
    setIsLoading(true); // getFlight가 실행 되기 전 로딩화면
    getFlight(condition)
    .then((filter) => {
      setFlightList(filter)
      setIsLoading(false) // getFlight가 실행 되기 후 로딩화면
    })
  }, [condition] 
  )

검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청(fetch)합니다

import flightList from '../resource/flightList'
import fetch from 'node-fetch'

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

export function getFlight(filterBy = {}) {
  // HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
  // TODO: 아래 구현을 REST API 호출로 대체하세요.
  // fetch 를 사용해 다시 작성한다 
  
  // fetch를 이용해 서버에 AJAX 요청

  let emString = ''
  if(filterBy.departure){
    emString = emString + `departure=${filterBy.departure}&`
  }
  if(filterBy.destination){
    emString = emString + `destination=${filterBy.destination}`
  }
  let endpoint = `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${emString}`

  return fetch(endpoint)
    .then(res => res.json())
}

사실 이 부분은 나도 정확하게는 머르겠당...ㅎ

'codeStates front-end > React' 카테고리의 다른 글

[React] UI 디자인 (0)	2023.02.15
[React] UI/UX (0)	2023.02.15
[React] Effect Hook (0)	2023.02.02
[React] 데이터 흐름 (0)	2023.02.02
[React] 실습 - React Twittler State & Props (0)	2023.01.30

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기포스트

ABOUT ME

HwanTech HwanTech

📌 StatesAirline Client

📖 학습 목표

'codeStates front-end > React' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

인기포스트

ABOUT ME

📌 StatesAirline Client

📖 학습 목표

'codeStates front-end > React' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역