검색 폼 구현

Input 요소 사용하기

검색 화면 상단에 위치할 검색 폼부터 만들어 본다.
요구사항: 검색 상품명 입력 폼이 위치한다.
앞으로 UI는 모두 JSX 문법으로 작성한다.
검색 폼을 위한 element를 만든다.

const element = (
  // (1)
  <>
    <header>
      <h2 className="container">검색</h2>
    </header>
    <div className="container">
      {/* (2) */}
      <form>
        <input type="text" placeholder="검색어를 입력하세요" autoFocus />
      </form>
    </div>
  </>
)

// (3)
ReactDOM.render(element, document.querySelector("#app"))

(2): 헤더 아래 검색 폼 element를 추가했다. “검색어를 입력하세요”라는 플레이스 홀더 문구가 표시되는 텍스트 인풋이다.
<></> : 트리 형태를 유지해야하기 때문에 최상단의 노드는 단 하나만 있어야 한다. 가장 많이 쓰이는 <div></div> element로 감싸 하나의 루트 노드를 유지할 수 있다.
만약 실제 돔에 상단의 노드가 필요하지 않다면 프래그먼트(Fragment)라고 불리는 태그를 사용해서 묶어줄 수 있다.
(1): 위에서 사용한 <> 문자가 바로 프래그먼트이다.
(3): element 에 담긴 React element는 ReactDOM에게 전달해 가상돔을 만들고 화면에 출력하도록 했다.
이제 input element에 텍스트를 입력하면 입력한 값이 출력되어 나올 것이다.
이것은 브라우저의 기본 동작인데 React에서는 다루는 방식이 다르다.
React에서 input element를 제대로 다루려면 브라우저 상태 관리를 사용하지 않고 React 방식의 상태 관리가 필요하다.