[React] event, eventHandler, callbackFunction

일단 우리의 앱은 위와 같은 계층구조를 가지고 있다

App이라는 Main contoroller (라고 부르겠음; 이게 기억하기 쉬우니께)가

페이지에 보여줄 요소들을 자식으로 가지고 있음.

 

App의 자식으로는 SearchBar, ImageList가 있고

SearchBar, ImageList는 형제간인데 얘네들끼리는 직접적인 소통은 불가함

하지만 자식-부모간에는 props와 callback function으로 소통하는게 가능한거임

 

그럼 SearchBar에서 text value를 "app"으로 넘겨주고

그럼 그 앱이 api로 이미지를 요청한 다음 응답받아서

ImageList에 이미지 주소들을 넘겨주면 됨 ㅇㅇ

 

 

 

1. SearchBar.js

    import { useState } from "react";

    function SearchBar({onSubmit}){
        const [term, setTerm] = useState('');

        const handleFormSubmit = (event) => {
            event.preventDefault(); // default : press enter key, than refresh page
            onSubmit(term);
        };
        const handleChange = (event) =>{
            setTerm(event.target.value);
        };
        return (
            <div>
                <form onSubmit={handleFormSubmit}>
                    <input value={term} onChange={handleChange}/>
                </form>
            </div>
        );
    }
    export default SearchBar;

이건 텍스트 입력창이 있고 검색어를 입력 후 "엔터키"를 누르면 App.js로 현재 입력값을 넘겨줄 수 있다. 넘겨줄때는 callback function을 사용

 

데이터를 입력하고 엔터를 하면 값을 넘긴다. 이럴 때는 form태그를 사용하면 좋은데

이녀석은 기본동작이 엔터키를 누르면 페이지를 새로고침 하는거임; 그럼 우리 검색어 입력했던거 없어짐;

그러기 위해서 7행에서 event.preventDefault함수 호출해주고염

 

React프로젝트에서는 값을 가져오고 업데이트 할때 query selector를 사용하지 않는다

(document.getElementByID 이런거)

그대신 state로 정의한 변수와 setter를 사용하는데, 이렇게 사용하면 편한게

curly braces로 값을 출력하고 , setter함수로 값을 변경할 수 있으니

 

const text = document.getElementByID("term").value 는 const text =  {term}으로

document.getElementByID("term").value = event.target.value; 는 setTerm(event.target.value); 으로

코드가 훨씬 간편해 지는것이다,..!@

 

 

2. App.js - 위 코드의 이해를 위해 App.js를 넣음

    import searchImage from './api';
    import SearchBar from './components/SearchBar'

    function App(){
        const handleSubmit = async(term)=>{        
            const result = await searchImage(term);
            console.log(result);
        }
        return (
            <div>
                <SearchBar onSubmit={handleSubmit}/>
            </div>
        );
    }
    export default App;

콜백함수가 호출하면 SearchBar에서 건네준 term이라는 데이터를 가지고

searchImage함수를 요청합니당 리턴값은 배열임

 

5-6행에서 async, await를 사용하지 않고 console.log로 출력하면

api 응답을 받지 않은 상태에서 로그를 출력하게 되어서 데이터가 안 뜨고  promise가 뜸

응답결과를 받은 후에 콘솔로 확인하고 싶다면 async, await를 꼭 넣어주면 된다

 

 

api응답을 콘솔로 찍을 수 있지만 관리자도구에서 확인해볼게염

관리자도구 -> Fetch/XHR에서 확인 가능

응답을 object형태로 보고싶다면 preview 클릭 ㄱ