function handleChange(e) { setValue(e.target.value); }

React로 데이터 다루기 (2. 입력 폼 다루기 / 입력 폼 뽀개기)

import { useState } from 'react';

export default function SearchForm() {
  const [value, setValue] = useState();

  function handleChange(e) {
    setValue(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="q" value={value} onChange={handleChange} />
      <button>검색</button>
    </form>
  );
}

import { useState } from 'react';: React 라이브러리에서 useState 함수를 불러옵니다. 이 함수는 React 컴포넌트에서 상태(state)를 다루는 데 사용됩니다.

export default function SearchForm() {: SearchForm 이라는 이름의 함수형 컴포넌트를 정의합니다. 이 컴포넌트는 나중에 다른 파일에서 가져와 사용할 수 있도록 export되었습니다.

const [value, setValue] = useState();: useState를 사용하여 value라는 상태 변수와 그 상태를 업데이트할 수 있는 setValue 함수를 생성합니다. 초기값은 undefined입니다.

function handleChange(e) { setValue(e.target.value); }: handleChange 함수는 인자로 이벤트 객체 e를 받아와서, 해당 이벤트 객체의 target.value 값으로 value 상태를 업데이트합니다. 이 함수는 나중에 입력 필드의 값이 변경될 때 실행됩니다.

function handleSubmit(e) { e.preventDefault(); }: handleSubmit 함수는 폼(form)이 제출될 때 호출되며, 이벤트의 기본 동작을 방지하기 위해 e.preventDefault()를 호출합니다. 이 함수는 현재 코드에서는 더 이상의 동작이 정의되어 있지 않습니다.

return (
  <form onSubmit={handleSubmit}>
    <input name="q" value={value} onChange={handleChange} />
    <button>검색</button>
  </form>
);

<form onSubmit={handleSubmit}>: 폼 요소를 만들고, 폼이 제출될 때 handleSubmit 함수가 호출되도록 합니다.

<input name="q" value={value} onChange={handleChange} />:   
입력 필드를 생성하고, value 상태로 값을 설정하며, 값이 변경될 때마다 handleChange 함수가 호출되도록 합니다.

<button>검색</button>: "검색"이라고 쓰인 버튼을 만듭니다.

이렇게 모든 코드가 함께 동작하여 간단한 검색 폼이 만들어졌습니다. 입력 필드에 텍스트를 입력하고 "검색" 버튼을 누르면, 해당 입력 값이 value 상태에 저장되고, 제출 이벤트는 방지됩니다.

User
target.value 가 뭔데?

ChatGPT
e.target.value는 이벤트 핸들러 함수에서 사용되는 표현식으로, 주로 입력 필드(input, textarea 등)에서 사용자가 입력한 값을 나타냅니다.

여기에서 세 가지 중요한 부분이 있습니다:

e: 이벤트 객체입니다. 이 객체는 이벤트가 발생한 상황에 대한 다양한 정보를 포함하고 있습니다.

e.target: 이벤트가 발생한 엘리먼트를 가리킵니다. 예를 들어, 만약 onChange 이벤트가 입력 필드에서 발생했다면, e.target은 해당 입력 필드를 가리킵니다.

e.target.value: 이벤트가 발생한 엘리먼트의 값입니다. 주로 입력 필드에서 사용자가 입력한 내용을 나타냅니다.

따라서, setValue(e.target.value)는 입력 필드에서 발생한 이벤트의 값을 value 상태로 설정합니다. 이를 통해 입력 필드에 사용자가 입력한 값을 계속 추적하고 상태로 관리할 수 있습니다.