React로 간단한 검색창 만들기

2023-03-31

안녕하세요.

지난 시간에는 React에서 이벤트를 핸들링하는 방법에 대해서 알아봤습니다.

이번 시간에는 이벤트를 활용해서 간단한 검색창을 만들어 보겠습니다.

input에 입력한 값을 button을 누르면 p태그에 보여지는 간단한 검색창을 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");
    const App = () => {
      return (
        <>
          <input />
          <button>search</button>
          <p>Looking for ...</p>
        </>
      )
    }
    ReactDOM.render(<App />, rootElement);
  </script>

</body>
</html>

여기에 state를 추가하고 input에 입력한 값을 실시간으로 p태그에 보여지게 해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    const state = { keyword: "", typing: false, result: ""}

    const App = () => {
      function handleChange(event) {
        setState({keyword: event.target.value})
      }
      return (
        <>
          <input onChange={handleChange} />
          <button>search</button>
          <p>Looking for {state.keyword} ...</p>
        </>
      )
    }

    function setState(newState) {
      Object.assign(state, newState);
      render();
    }

    function render() {
      ReactDOM.render(<App />, rootElement);
    }

    render();

  </script>

</body>
</html>

여기서 Object.assign()은 앞에있는 객체에 뒤에있는 객체를 병합하는 역할을 합니다.

그리고 typing 할때마다 실시간으로 렌더링할 수 있도록 렌더함수를 선언해서 setState함수에서 호출하도록 합니다.

버튼에 onClick 이벤트를 추가해서 버튼을 누르면 p태그에 검색 결과를 보여주도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const rootElement = document.getElementById("root");

    const state = { keyword: "", typing: false, result: ""}

    const App = () => {
      function handleChange(event) {
        setState({keyword: event.target.value, typing: true})
      }

      function handleClick() {
        setState({typing: false, result: `We find result of ${state.keyword}`})
      }

      return (
        <>
          <input onChange={handleChange} />
          <button onClick={handleClick}>search</button>
          <p>{state.typing ? `Looking for ${state.keyword} ...` : state.result }</p>
        </>
      )
    }

    function setState(newState) {
      Object.assign(state, newState);
      render();
    }

    function render() {
      ReactDOM.render(<App />, rootElement);
    }

    render();

  </script>

</body>
</html>

여기서 typing이 true일때는 Looking for ... 이라는 문구를 보여주고 false일때는 result를 보여주도록 했습니다.

이렇게 React를 사용해서 간단한 검색창을 만들어 봤습니다.

감사합니다.

< 목록으로 돌아가기