React state airline-client 과제

Dongwoo Joo·2023년 4월 3일

codestates bootcamp

목록 보기

24/48

과제 1

useState

export default function Main() {
  const [condition, setCondition] = useState({departure: 'ICN'});

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

      setCondition(prev => {
        return {...prev, destination}
      })
    }
  };

state 변수 생성
condition: 상태 저장 변수
setCondition: 상태 갱신 함수
useState: state hook
useState({초기 값})

search 함수 정의
인자: departure, destination

과제 2

과제 시작 전, 과제의 요구사항을 3가지로 정리했다.
핵심인 컴포넌트와 상태 변경을 도식화 했다.
항상 기억하자.
프로그래밍이 10이면 문제 정의, 해결방안 구상이 8, 코드 작성이 2이다.
문제 정의 -> 개념화 및 추상화, 구조화, 분석 -> 구체적 해결 방안 글로 작성
그리고 코드 작성이다(정답은 아니지만, 내겐 이 길이 가장 빠르다).

과제 테스트 해결 코드 구현에 대한 내용을 작성하자.

Server API 사용

Main 컴포넌트

  useEffect(() => {
    setIsLoading(true)
    getFlight(condition)
    .then(res => {setFlightList(res)
    setIsLoading(false)})
  }, [condition]
  )
  
FlightDataApi 컴포넌트의 getFlight 함수
export function getFlight(filterBy = {}) {
  const {departure, destination} = filterBy
  return fetch(`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=${departure}&destination=${destination}`)
  .then(res => res.json())
  
</div>
{isLoading? <LoadingIndicator /> : <FlightList list={flightList} />} 
</div>

FlightDataApi.js 에 있는 getFlight() 함수를 가져온다. 인자는 condition 이다. condition = [departure, destination] 이다.
getFlight 함수에 리턴값으로 fetch를 넣는다.
filterBy 객체를 구조 분해 할당한다. -> {departure, destination}
fetch에 URL 작성, 81까지 endpoint를 작성해주고, 그 뒤에는 쿼리 문을 작성한다.
return fetch 한다. 함수에서 반환 값은 return으로 작성해주자.
.then 메서드를 활용한다. fetch API로 받아오는 데이터들이 곧 인자 res 이다. json 파일로 보여주기 위해서 res => res.json 으로 반환한다.

쿼리 문에는 departure, destination이 템플릿 리터럴 안에 작성되어 있는 것을 볼 수 있는데, 중괄호 안에 departure, destination은 textarea에 사용자가 입력하는 변수이다.

이렇게 받아온 서버의 API 데이터들을 웹 페이지에서 보여주기 위해, FlightList 컴포넌트와 useState를 활용한다.
setFlight 상태 갱신 함수를 getFlight(condition) 함수에 콜백함수로 활용함으로서, 최종 리턴 값은 서버 API를 데이터로 한 FlightData가 된다.
LoadingIndicator 컴포넌트를 불러와서, 서버에서 데이터를 받아오지 못할 때, 사용자에게 로딩 화면을 제공한다.
const [isLoading, setIsLoading] = useState(false);
초기 상태는 false 이다. 데이터를 받아온 상태이다.
setIsLoading이 true 이면, 로딩 중이라는 의미이다.
setIsLoading이 false 이면, 로딩 중이 아니므로, 서버의 데이터를 받아왔다는 의미이다.
{isLoading? : }
로딩 중이냐? 맞다면, LoadingIndicator 함수 호출, 아니면, flightList 출력.
로딩 상태라면, 로딩 중이라는 화면 출력, 로딩 되었다면(데이터를 받았다면) flightList 데이터 출력
즉, setIsLoading 일 때, setIsLoading 함수가 실행되어야 하니까 true 이고, 로딩 상태가 아닐 때는 false가 된다.
그리고 setIsLoading(false)은,
getFlight 함수의 then 메서드 안에 포함되어야 한다.
아래 코드에서 setIsLoading은 비동기 함수이다.
즉, 순차적으로 실행 시키고 어떤 작업이 먼저 끝날지 모른다. 순서가 예측 불가능하다는 의미이다.
따라서, setIsLoading(true) -> 로딩 중
setIsLoading(false) -> 데이터 전송 완료
이 두 가지를 구분지어야 한다.
그래서 setIsLoading(false)를 getFlight() 함수에 넣은 것이다.

그렇다면, 실행 순서는 다음과 같다.

setIsLoading(true) 실행. 즉, 로딩 중 띄움 -> getFlight 함수 실행 -> setFlightList에 서버 데이터를 받아온다. -> setIsLoading(false) 실행
다만, 이 과정이 매우 빠르게 진행되어서 로딩 중은 거의 안 보인다고 보면 된다.
useEffect(() => {
setIsLoading(true)
getFlight(condition)
.then(res => {setFlightList(res)
setIsLoading(false)})
}, [condition]
)

function FlightList({ list = [] }) {
  if (list.length === 0) {
    return <div className="merge-col">목록이 없습니다</div>;
  }

  return list.map(
    ({ uuid, departure, destination, departure_times, arrival_times }) => {
      return (
        <Flight
          key={uuid}
          departure={departure}
          destination={destination}
          departureTimes={departure_times}
          arrivalTimes={arrival_times}
        />
      );
    }
  );
}

실시간 세션

네트워크 요청은 fetch, axios 둘 중 1개로 코드 작성

useEffect 인자에 따른 effect 함수 실행

useEffect(함수, [종속성1, 종속성2, ...])
두 번째 인자는 종속성 배열이다.
배열 내의 종속성1, 또는 종속성2의 값이 변할 때,
첫 번째 인자의 함수가 실행된다.
즉, 배열 내의 어떤 값이 변할 때만, (effect가 발생하는) 함수가 실행된다.
useEffect(함수, 빈 배열)
컴포넌트가 처음 랜더링 때만 effect 함수 실행
useEffect(함수)
컴포넌트가 처음 랜더링 될 때 effect 함수 실행
props가 업데이트 될 때 effect 함수 실행
state가 업데이트 될 때 effect 함수 실행