#React탐라-헤르미온느 9일차 TIL

이 코드는 컴퓨터에서 실행되는 프로그램에서, titleChangeHandler 라는 함수를 만드는 것이에요.

이 함수는 e 라는 매개변수를 받아서 실행되는데, 이 e는 이벤트(event)라고 불리는 것을 의미해요. 예를 들어, 사용자가 키보드를 누르면 그 때 이벤트가 발생합니다.

그리고 이벤트에서 발생한 값을 사용하기 위해서, e.target.value 라는 값을 setTitle 함수를 사용해서 title이라는 상태값에 할당하고 있어요. 이 값은 어떤 입력 필드(input)에서 사용자가 입력한 값을 의미합니다.

따라서, 이 코드는 사용자가 입력한 값을 가져와서, title 이라는 상태값을 업데이트하는 함수를 만든다고 할 수 있겠네요.

onChange 이벤트

onChange는 HTML 요소의 값이 변경될 때 발생하는 이벤트입니다. 보통 input, textarea 등과 같은 폼 요소에 적용되어 사용자의 입력에 따라 값을 실시간으로 업데이트하거나, 이벤트 핸들러를 호출하는데 사용됩니다.
React에서는 사용자가 입력하는 텍스트와 같은 값들을 관리하기 위해서 상태(State)라는 것을 사용합니다. 이를 통해 값이 변경되면 React가 이를 자동으로 감지하고 UI를 업데이트할 수 있게 됩니다. 이 때, input 요소에 입력되는 값도 상태로 관리하게 되는데, 이를 통해 사용자가 입력한 값을 변수로 저장하고 사용할 수 있습니다. 이 변수가 바로 value입니다. 쉽게 말해서, input 요소에 입력된 값은 value라는 변수에 저장되며, 이 값은 React에서 상태로 관리됩니다. 따라서 React에서는 value 값을 상태(State)와 연동시켜서, 사용자 입력에 따라 값이 변경될 때마다 자동으로 UI를 업데이트할 수 있도록 합니다.

React에서는 사용자가 입력하는 텍스트와 같은 값들을 관리하기 위해서 상태(State)라는 것을 사용합니다. 이를 통해 값이 변경되면 React가 이를 자동으로 감지하고 UI를 업데이트할 수 있게 됩니다. 이 때, input 요소에 입력되는 값도 상태로 관리하게 되는데, 이를 통해 사용자가 입력한 값을 변수로 저장하고 사용할 수 있습니다. 이 변수가 바로 value입니다. 쉽게 말해서, input 요소에 입력된 값은 value라는 변수에 저장되며, 이 값은 React에서 상태로 관리됩니다. 따라서 React에서는 value 값을 상태(State)와 연동시켜서, 사용자 입력에 따라 값이 변경될 때마다 자동으로 UI를 업데이트할 수 있도록 합니다.

import

import React from "react";
import "./App.css";
import { useState } from "react";

e.target.value

// 내가 e라는 매개변수를 받아서 e는 event 인데 홍길동이야. e를 setTitle이라는 함수로 title이라는 변수를 홍길동으로 변경시킨다.

const titleChangeHandler = (e) => {
  setTitle(e.target.value);
};

추가버튼

  const buttonForAdd = () => {
    const newContent = {
      id: content.length + 1,
      title: title,
      todo: todo,
    };
    setContent([...content, newContent]);
    setTitle("");
    setTodo("");
  };

버튼 초기화

setTilte("");
setTodo("");

이거랑.

<div> 제 목 </div>
        <input
          onChange={titleChangeHandler}
          className="titleBox"
          value={title}
        ></input>
        <div> 내 용 </div>
        <input
          onChange={todoChangeHandler}
          className="titleBox"
          value={todo}

여기서 input 안에 value = {title} ,value ={todo}

setTilte("");
setTodo("");
추가버튼을 누르는 동시에 저 setTitle의 빈배열로 인해 input 부분이 비워진다.
value={ title} 처럼 value 값이 동기화 되고 있다. setTitle 덕분?에.