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를 받아서 실행시켜 보세요.
};