[React] 상태 끌어올리기

Main(부모 컴포넌트) > Search(자식 컴포넌트)

 

state : 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값

props : 외부로부터 전달받은 값 

 

 

1. 상태 변경 함수인 search 에 conditon 변경 함수인 setCondition 을 이용해 값을 변경. 

☘️ < Main.js >

 

2. Search 컴포넌트에 상태변경함수 'search'가 'onSearch' props 로 전달되어야 한다. 

 

☘️ <Search.js>

3. Main 에서 내려온 onSearch props 를 Search 에서 받음. 

props로 콜백함수를 넘겨줌. -> onSearch 가 콜백 함수. 

 

4. 상태 변경 함수 `search`는 Search 컴포넌트의 `검색` 버튼 클릭 시 실행되어야 함. 

 

5. input 에서 textDestination을 입력 받아서, onSearch 함수의 ({destination}) 에 전달.