220801 - FeedBack

[BEB] Section 2: 웹 개발 심화 / [React] 데이터 흐름의 이해와 비동기 요청 처리 / Sprint - StatesAirline Client (1) 中

 

React - (심화)를 실제로 만져볼 기회가 생겼다.

아래의 두개 파일은 서로 props / state로 연결되어 있다. useEffect를 이용한 side effect는 다음 스프린트때 다룰 예정이다.

 

순서는 다음과 같다. 

1. Main.js 하단의 return 부분 <Search onSearch = {search}> 을 보면, onSearch라는 props를 생성해주고, 그 props에 search라는 함수를 대입한다.
2. 1번에서 onSearch라는 함수 props를 보내줬으니, Search.js 를 첫줄 function Search({onSearch}) 에다가 콜백 함수를 설정해두면 props인 onSearch를 사용하면 Main.js의 search 함수를 이용하게 되는것이랑 마찬가지가 된다. 
3. 그 뒤 Search.js 밑에서 onSearch를 사용하기 전에,  보낼 인자를 생성한다. 지금은 객체로 보내지만, 형태의 판단여부는 Main.js를 보고 결정하여야 한다. (4번에계속)
4. Search.js에서 onSearch를 사용하여 Main.js의 search 함수를 이용할 것이기 때문에 직접적으로 연결이 되어있다고 생각할 수 있다. 그때 Main.js의  search 함수 생성 라인, function Search({onSearch}) 을 보고 인자에 무엇이 들어가야하는가를 확인한다. 그 후 방금 그 인자의 형태와 Search.js의 onSearch()에 들어갈 형태를 통일시켜주면 된다.
5. 객체인 관계로 onSearch를 통해 보낼 객체를 주문에 맞게 만들어준다. const data = {departure : "ICN", destination : textDestination}
6. 이제 Main.js 에서 객체를 받았고, 이 값으로 setTextDestination 을 통해 state인 TextDestination 을 최신화 시켜주면 된다.
      

Main.js

	...

export default function Main() {
  const [condition, setCondition] = useState({
    departure: 'ICN'
  })
  const [flightList, setFlightList] = useState(json)

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

    if (condition.departure !== departure || condition.destination !== destination) {
      setCondition({departure, destination})
  
    }
  }
  
 	...
  
	return (
   	
    ...
    
        <Search onSearch={search} />
  
  	...
  
  	}

 

Search.js

function Search({onSearch}) {
  const [textDestination, setTextDestination] = useState('')
  
  ...
  
  const handleSearchClick = () => {
    console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다')

    const data = {departure : "ICN", destination : textDestination}
    onSearch(data);
    // onSearch("ICN", textDestination);
    // TODO:
  }
  
  ...
}