<input onChange={(e) => {console.log(e.target.value);}}></input>

(e) => 이벤트 파라미터, target 은 변화 혹은 이벤트가 일어나고 있는 html 태그등을 의

이벤트 bubbling 막기

상위 html로 퍼지는 이벤트 버블링을 막고 싶으면 e.stopPropagation()

<span onClick={(e)=>{ e.stopPropagation(); console.log(1)}}>

사용자 입력 값 저장하여 출력하기

1. concat 방법 : 기존 배열 건드리지 않고 새로운 원소 추가 // {제목 수정(제목.concat(새로운 값))}
2. spread 방법 : 기존 배열 복사 후 원소 추가 // let copy = […글 제목]

1. 힌트 : 이미 map을 이용해놓았기 때문에 state 값만 변경해주면 된다.
// let [글제목, 글제목수정] = useState(["a","b","c"]) 에 새 원소를 추가해주면 됌

과정 1: value 값 저장하기
<input onChange((e)=>{입력값 변경(e.target.value)})> // 입력값에 밸류값 전달
<button onClick(()=>{글제목수정(글제목.concat(입력값))})> //글제목에 입력값 원소 추가 

벨로퍼트 식 리액트 예시

import React, { useState } from "react";

function InputSample() {
  const [text, setText] = useState("");

  const onChange = (e) => {
    setText(e.target.value);
  };

  // 현재 onChange가 일어나고 있는 DOM == input, 해당 값의 value를
  // setText에 삽입한다는 것이다.

  // onChange와 같은 이벤트 발생 시 , e를 파라미터로 받는데,
  // e.target은 이벤트가 발생한 DOM 객체를 가르킨다.

  const onReset = () => {
    setText("");
  };

  return (
    <div>
      <input onChange={onChange} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

사용자 입력 값이 여러 개 일때는 어떻게 할까?

보통 로그인할 때 우리는 ID만 입력하는 것이 아니라, PASSWORD 도 입력한다.

onChange 함수를 두 개 만들고, useState를 두 개 만들어서 관리하는 것도 하나의 답이겠지만,

이는 효율적인 방법이 아니다.

더 좋은 방법은 name 을 지정해주는 것이다. (ID의 개념) + useState를 객체형태로 관리해주면 된다.