[React] StatesAirline Client 과제 part 1
function Search({ onSearch }) {
const [textDestination, setTextDestination] = useState('');
const handleChange = (e) => {
setTextDestination(e.target.value.toUpperCase());
};
const handleKeyPress = (e) => {
if (e.type === 'keypress' && e.code === 'Enter') {
handleSearchClick();
}
};
위의 Search 함수부터 살펴봅시다.
const [textDestination, setTextDestination] = useState('');
1. textDestination이라는 state를 setTextDestination 이라는 함수로 변경해줄 수 있도록 선언해주었습니다.
const handleChange = (e) => {
setTextDestination(e.target.value.toUpperCase());
};
2. handleChange라는 함수는 onchange 이벤트를 통해 실행됩니다.
onChange={handleChange}setTextDestination는 textDestination의 값을
e.target.value.toUpperCase()라는 내용으로 변경해줍니다.
차근차근 내용을 살펴봅시다.
e는 여기서 onchange 이벤트를 통해 받아온 이벤트 객체입니다.
(handleChange와 같은 이벤트 핸들러에 전달되는 parameter는 이벤트 객체만이 들어가게 됩니다.
이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터 등 관련 정보는 모두 이벤트 객체에 저장됩니다.)
다음으로 target.
target 속성은 이벤트가 발생한 대상 객체내의 target 값을 가져옵니다.
console.log(e)를 찍어봤을 때, 나오는 콘솔입니다.
target이 id="input-destination"인 input 컴포넌트를 가리키고 있습니다.
바로 onchange 이벤트가 발생한 input 컴포넌트죠.
해당 input의 value 값을 살펴보면
value = {textDestination}textDestination이라는 유동적인 변수를 받아오고 있습니다.
바로 위에서 봤던 state 값이네요.
input의 value 값이 변경되면,
setTextDestination는 변경된 value 값을 toUpperCase()로 변환한 뒤 textDestination에 담아준다.
그리고 textDestination는 다시 input의 value가 된다.
는 결론이 나옵니다.
말로 다시 풀어서 설명하면 input에 icn이라고 쳐도 ICN이라고 변환된 내용이 다시 input value에 담기는 겁니다.
const handleKeyPress = (e) => {
if (e.type === 'keypress' && e.code === 'Enter') {
handleSearchClick();
}handleKeyPress는 이벤트 객체인 e의 type이 keypress이고 code가 enter라면,
즉 enter키를 눌렀을 때 handleSearchClick()이 실행되는 것입니다.
(keydown: 키보드를 누를 때 실행. 계속 누르고 있는 경우에는 계속 실행됨. 키보드의 어떤 키가 눌러지더라도 반응.
keypress: 키보드를 누를 때 실행. 계속 누르고 있는 경우에는 계속 실행 됨.
한글 입력, 방향키, DELETE키와 같은 즉시 TEXT에 입력이 반영되는 키보드가 아닌 것에는 이벤트가 반응하지 않는다.
keyup: 누른 키에서 손을 뗄 때 실행)
const handleSearchClick = () => {
console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다');
// TODO: 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.
onSearch({ departure: "ICN", destination: textDestination })
};enter를 눌러 handleSearchClick이 실행되면 우선 console.log()안의 텍스트가 콘솔에 찍힐 것이고,
다음으로는 onsearch()라는 함수가 실행됩니다. Search의 props인 onSearch는 함수의 형태를 하고 있네요.
3. onSearch라는 props가 무엇인지 봅시다.
Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다
라는 부분때문에 일단은 onSearch를 props로 전달했을 겁니다.
main.js에서 선언한 search를 onSearch로 어떻게 전달해야 하는가?
이 부분에 대해서 잘 이해가 안갔었는데요.
<Search onSearch={search} / >여기를 보면 Search 컴포넌트의 onsearch는 search의 값이 됩니다.
onSearch라는 props는 결국 search()라는 함수를 실행하게 되는 겁니다.
onSearch({ departure: "ICN", destination: textDestination })결국은 위는 { departure: "ICN", destination: textDestination }를 search에 넣어주는 것과 같습니다.
const search = ({ departure, destination }) => {
if (
condition.departure !== departure ||
condition.destination !== destination
) { console.log('condition 상태를 변경시킵니다');
// TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.
setCondition({ departure, destination });
}
};다시 search라는 함수는 { departure, destination }이라는 값을 받으며,
condition의 departure의 값이 방금 받아온 departure이 아니거나,
detination의 값이 방금 받아온 detination이 아니라면
setCondition이라는 함수로 condition이라는 state의 기본값을 방금 받아온 { departure, destination }로 변경해줍니다.
그러면
onSearch({ departure: "ICN", destination: textDestination })이 얘기는 search({ departure: "ICN", destination: textDestination })가 실행되고,
search함수 내에서 setCondition({ departure: "ICN", destination: textDestination })이 실행된다는 얘기입니다.
그러면 condition의 값은 { departure: "ICN", destination: textDestination }이 되겠죠.
condition값이 바뀌면
<Debug condition={condition} />여기에 있는 컨디션 값이 바뀌겠네요. 그리고 리스트에 적용이 되는데.. 이부분은 좀더 탐구해보는 것으로 ㅎㅎ;;;
ㅎㅎ 정말 개같다 리액트 ㅗㅗㅗㅗㅗㅗ 주겆궂궂구죽어라리액트