7강. 이벤트 처리와 사용자 입력

?1. 이번 강의에서 해결할 문제

게임이 많아지면 제목을 검색해야 합니다. 입력값을 읽고 검색어를 지우는 사용자 행동을 React 코드에 연결합니다.

✓2. 학습 목표

• React 이벤트 핸들러를 전달한다.
• change와 click 이벤트를 구분한다.
• 입력값을 state에 저장하고 화면에서 사용한다.

◇3. 핵심 개념

React 이벤트 prop은 camelCase인 onClick, onChange를 사용하며 호출 결과가 아니라 함수를 전달합니다. 이벤트 객체에는 이벤트가 발생한 요소와 입력값이 들어 있습니다.

사용자가 입력할 때마다 검색어 state를 갱신하면 현재 검색어와 화면이 한 데이터 원본을 공유합니다.

</>4. 단계별 코드 예시

파일 경로: game-release-dashboard/src/components/SearchBar.tsx

import { useState } from 'react';

export function SearchBar() {
  const [query, setQuery] = useState('');

  function clearQuery() {
    setQuery('');
  }

  return (
    <section aria-label="게임 검색">
      <label htmlFor="game-search">게임 제목</label>
      <input
        id="game-search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="예: Star"
      />
      <button type="button" onClick={clearQuery}>
        검색어 지우기
      </button>
      <p aria-live="polite">현재 검색어: {query || '없음'}</p>
    </section>
  );
}

파일 경로: game-release-dashboard/src/App.tsx

import { SearchBar } from './components/SearchBar';

function App() {
  return (
    <main>
      <h1>출시 예정 게임</h1>
      <SearchBar />
    </main>
  );
}

export default App;

→5. 코드가 동작하는 이유

입력할 때마다 onChange 함수가 이벤트의 현재 value를 setter에 전달합니다. state가 바뀌면 input의 value와 안내 문구가 함께 갱신됩니다. 버튼은 clearQuery 함수 자체를 받아 클릭 시점에 호출합니다.

!6. 자주 하는 실수와 해결법

• onClick={clearQuery()} 작성: 렌더링 중 실행됩니다. onClick={clearQuery}로 함수를 전달합니다.
• for 속성 사용: JSX에서는 htmlFor를 사용합니다.
• 입력마다 DOM을 직접 탐색: event.target.value 또는 state를 사용합니다.
• 버튼으로만 입력을 지우고 value를 연결하지 않음: controlled input이 아니면 state 변경이 화면에 반영되지 않습니다.

✎7. 직접 실습

플랫폼 선택 select를 추가하고 PC, Console, Mobile 값을 state에 저장하세요. 현재 검색어와 플랫폼을 한 문장으로 출력하세요.

?8. 이해 점검 질문 3개

1. onClick에 함수 호출 결과가 아니라 함수를 전달하는 이유는 무엇인가요?
2. 입력 이벤트에서 현재 문자열은 어디서 읽나요?
3. label의 htmlFor와 input의 id를 연결하면 어떤 점이 좋아지나요?

■9. 핵심 요약

이벤트 핸들러는 사용자 행동을 state 변경으로 연결합니다. 검색어를 React가 관리하게 되었고 다음 강의에서 이 값에 따라 화면을 선택합니다.