TIL 34: [React] 데이터 흐름의 이해와 비동기 요청 처리

오늘은 어제에 이어서 StateAirlines를 마저 했습니다. 새로 배운 내용은 없어 처음 풀었을 때 헤맸던 위주로 정리해보려고 합니다!

 

Lifting State Up

 

부모컴포넌트에 아래와 같이 search 함수를 onSearch를 통해 전달해주면,

<Search onSearch={search} />

자식 컴포넌트에서 함수(Search)가 실행되면 onSearch에 의해 부모 컴포넌트가 변경됩니다.

import { useState } from 'react'

function Search({onSearch}) { //onSearch 넣어주기, Main에서도 <Search onSearch={search} />해주기
  const [textDestination, setTextDestination] = useState('')

  const handleChange = (e) => {
    setTextDestination(e.target.value.toUpperCase())
  }

  const handleKeyPress = (e) => {
    if (e.type === 'keypress' && e.code === 'Enter') {
      handleSearchClick()
    }
  }

  const handleSearchClick = () => {
    const departure = 'ICN' //매개변수 없으니 departure destination 따로 설정해주기
    const destination = textDestination === '' ? null : textDestination
    onSearch({departure,destination})
  }

  return <fieldset>
    <input id="input-destination" type="text" value={textDestination} onChange={handleChange} placeholder="CJU, BKK, PUS 중 하나를 입력하세요" onKeyPress={handleKeyPress} />
    <button id="search-btn" onClick={handleSearchClick}>검색</button>
  </fieldset>
}

export default Search