오늘은 sprint 과제를 진행하면서
처음 알게된점, 다시한번 복습하게된점, 중요한점을
다시 정리하여 나의 것으로 만들어보려고 한다.
이번과제를 진행하면서
저번에 포스팅하였던 상태 끌어올리기에 대해서
더 잘 이해하게 된 것같아서 아주 유익한 sprint였다.
6. State 끌어올리기(Lifting State Up)
정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올
jhbljs92.tistory.com
먼저, 이번 스프린트는 항공권 정보를 받아와서
도착지를 입력하여 입력된 도착지에만 해당하는 항공권 정보를
필터링해서 리스트를 렌더링해주는 스프린트이다.
먼저, 구조를 살펴보면
피그마로 간단히 구조를 만들어보았다.
위처럼 Main 최상위 컴포넌트에 Search, FlightList 컴포넌트가 있고
FlightList 컴포넌트에 하위 컴포넌트로 Flight컴포넌트들이 여러개 존재.
코드를 이제 보는데,
코드 전체를 보는 것보다 내가 직접 짜고,
새롭게 알게된 코드들로 알아볼 예정이다.
Main.js
위의 코드를 보면, useState를 이용하여
condition 상태와 setCondition을 통하여 condition상태를 변경시킨다.
여기서는 간단하게 setCondition 상태변경함수를 통해
search함수가 받아온 departure, destination 정보를
condition이라는 상태에 담아준다.
여기서 상태끌어올리기를 사용하는데 뒤에서
Search컴포넌트 설명할때 다시 설명하겠다.
useEffect 를 이용하여 FlightDataApi.js에 있는
getFlight함수를 import로 받아와서
AJAX요청을 보낸다.
요청에 성공하면 .then 메서드를 통해
받아온 res를 setFlightList 상태변경함수를 통해
초기값 빈배열로 있는 flightList에 담아준다.
Search 컴포넌트에
setCondition 상태변경함수를 실행시키는
search함수를 onSearch라는 props로 전달해준다.
위에서 선언해준 [isloading, setIsloading] useState를 통해
true일때와 false일때를 나누어서
로딩중이면 LoadingIndicator컴포넌트를 나타내고,
로딩이 끝나면 flightList를 나타냈다.
Search.js
상위컴포넌트에서 prop으로 onSearch를 받아서
search함수를 실행한다.
상태 끌어올리기는
이처럼 상위컴포넌트 App.js에서 useState를 정의하고,
하위컴포넌트에 각각 넣어줘야할때
하위 컴포넌트끼리는 데이터를 참조할 수 없기 때문에
상태변경함수를 하위컴포넌트로 보내서,
하위컴포넌트에서 실행을시키고,
바뀐 상태값을 다시 상위컴포넌트에 넣어주는 식으로 동작하는 것이다.
FlightDataApi.js
위에서 dummydata 대신 서버에서 데이터를 받아오게 하기위하여
서버주소인 url에서 flight를 GET하기 위하여 엔드포인트에 /flight를 추가하고
param이라는 변수에
filterBy값에 destination이 있으면
출발지와, 목적지를 같이 필터링시켜주어 param에 담아주고
destination이 없으면 출발지만 있는 url을
param에 담아준다.
이렇게 더미데이터, 서버에서 데이터받아오기
둘다 실습을 통하여 공부를 해보았는데
너무어려웠다. fetch를 해서하는건 알았지만
엔드포인트를 주는것도 생각해내기 시간이 너무 걸렸었고,
데이터를 받아와서 useEffect를 활용하여
렌더링시켜주는것도 상당히 헷갈렸다.
다른 실습예제로 더 많이 연습해보아야할 것 같다.
오늘은 sprint 과제를 진행하면서
처음 알게된점, 다시한번 복습하게된점, 중요한점을
다시 정리하여 나의 것으로 만들어보려고 한다.
이번과제를 진행하면서
저번에 포스팅하였던 상태 끌어올리기에 대해서
더 잘 이해하게 된 것같아서 아주 유익한 sprint였다.
6. State 끌어올리기(Lifting State Up)
정말 화가나는 예비군훈련을 마치고 다시 현생으로 돌아오자마자 마주친건 state끌어올리기.... 생전 처음들어보았다. 그래서 이게 뭔지 알아보기위해 포스팅을 하려고한다. 👉🏻 상태 끌어올
jhbljs92.tistory.com
먼저, 이번 스프린트는 항공권 정보를 받아와서
도착지를 입력하여 입력된 도착지에만 해당하는 항공권 정보를
필터링해서 리스트를 렌더링해주는 스프린트이다.
먼저, 구조를 살펴보면
피그마로 간단히 구조를 만들어보았다.
위처럼 Main 최상위 컴포넌트에 Search, FlightList 컴포넌트가 있고
FlightList 컴포넌트에 하위 컴포넌트로 Flight컴포넌트들이 여러개 존재.
코드를 이제 보는데,
코드 전체를 보는 것보다 내가 직접 짜고,
새롭게 알게된 코드들로 알아볼 예정이다.
Main.js
위의 코드를 보면, useState를 이용하여
condition 상태와 setCondition을 통하여 condition상태를 변경시킨다.
여기서는 간단하게 setCondition 상태변경함수를 통해
search함수가 받아온 departure, destination 정보를
condition이라는 상태에 담아준다.
여기서 상태끌어올리기를 사용하는데 뒤에서
Search컴포넌트 설명할때 다시 설명하겠다.
useEffect 를 이용하여 FlightDataApi.js에 있는
getFlight함수를 import로 받아와서
AJAX요청을 보낸다.
요청에 성공하면 .then 메서드를 통해
받아온 res를 setFlightList 상태변경함수를 통해
초기값 빈배열로 있는 flightList에 담아준다.
Search 컴포넌트에
setCondition 상태변경함수를 실행시키는
search함수를 onSearch라는 props로 전달해준다.
위에서 선언해준 [isloading, setIsloading] useState를 통해
true일때와 false일때를 나누어서
로딩중이면 LoadingIndicator컴포넌트를 나타내고,
로딩이 끝나면 flightList를 나타냈다.
Search.js
상위컴포넌트에서 prop으로 onSearch를 받아서
search함수를 실행한다.
상태 끌어올리기는
이처럼 상위컴포넌트 App.js에서 useState를 정의하고,
하위컴포넌트에 각각 넣어줘야할때
하위 컴포넌트끼리는 데이터를 참조할 수 없기 때문에
상태변경함수를 하위컴포넌트로 보내서,
하위컴포넌트에서 실행을시키고,
바뀐 상태값을 다시 상위컴포넌트에 넣어주는 식으로 동작하는 것이다.
FlightDataApi.js
위에서 dummydata 대신 서버에서 데이터를 받아오게 하기위하여
서버주소인 url에서 flight를 GET하기 위하여 엔드포인트에 /flight를 추가하고
param이라는 변수에
filterBy값에 destination이 있으면
출발지와, 목적지를 같이 필터링시켜주어 param에 담아주고
destination이 없으면 출발지만 있는 url을
param에 담아준다.
이렇게 더미데이터, 서버에서 데이터받아오기
둘다 실습을 통하여 공부를 해보았는데
너무어려웠다. fetch를 해서하는건 알았지만
엔드포인트를 주는것도 생각해내기 시간이 너무 걸렸었고,
데이터를 받아와서 useEffect를 활용하여
렌더링시켜주는것도 상당히 헷갈렸다.
다른 실습예제로 더 많이 연습해보아야할 것 같다.
