StateAirline Client part-1

React 데이터 흐름

• 페이지를 만들기 이전에 컴포넌트를 먼저 만들고 조립
• 상향식(bottom-up)으로 앱 만들기 (테스트가 쉽고 확장성이 좋음)
• 데이터는 위에서 아래로 흐름 (props를 이용해 전달인자 혹은 속성처럼 전달을 받음)
• 하향식(top-down)는 데이터를 전달하는 주체가 부모 컴포넌트
• React는 단방향 데이터 흐름(One-way data flow)

 

State 끌어올리기

• 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때 공통부모 컴포넌트 상태에 위치
• 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행
• 단방향 데이터 흐름의 원칙에 부합

 

StatesAirline Client - Part 1

export default function Main() {

// 항공편 검색 조건을 담고 있는 상태

const [condition, setCondition] = useState({

departure: 'ICN',

});

const [flightList, setFlightList] = useState([]);

// 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수

const search = ({ departure, destination }) => {

if (

condition.departure !== departure ||

condition.destination !== destination

) {

console.log('condition 상태를 변경시킵니다');

setCondition({departure, destination});

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

}

};

 

 

 

import { useState } from 'react';

function Search({onSearch}) {

const [textDestination, setTextDestination] = useState('');

const handleChange = (e) => {

setTextDestination(e.target.value.toUpperCase());

};

const handleKeyDown = (e) => {

if (e.type === 'keydown' && e.code === 'Enter') {

handleSearchClick();

}

};

const handleSearchClick = () => {

console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다');

onSearch({departure : "ICN", destination : textDestination})

// TODO: 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.

};