리액트는 단방향 데이터 흐름 원칙에 따라 하위 컴포넌트가 상위 컴포넌트의 데이터를 변경하는 것이 안되나 상태 끌어올리기라는 방식을 통해 그와 같은 기능을 해낼 수 있다.

하위 컴포넌트의 함수에 의해 상위 컴포넌트의 데이터가 바뀌어야 하는 경우, 상위 컴포넌트에서 상태를 변경하는 함수 그 자체를 하위 컴포넌트에 전달하고 하위 컴포넌트에서 해당 함수를 실행하는 것인데, 이를 ‘상태 끌어올리기’ 라고 한다.

// 상위 컴포넌트 중

function Main() {
  const [condition, setCondition] = useState({
    departure: 'ICN'
  })
	const search = ({ departure, destination }) => {
	    if (condition.departure !== departure || condition.destination !== destination) {
	      console.log('condition 상태를 변경시킵니다')
	      setCondition({departure, destination})
	    }
	}
	
	return <Search onSearch={search}/>
}

//하위 컴포넌트 중
function Search({ onSearch }) {
	const handleSearchClick = () => {
	    console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다')
	    onSearch({departure: 'ICN', destination: textDestination})
	  }

실제 십습했던 코드의 일부지만 위와 같은 방식으로 상태 끌어올리기를 할 수 있다.