input 값으로 state 변경하기

작성할 때마다, input 값 state 추가하기

onChange 메서드를 이용한다.

방법1 concat

import React, { useState } from "react";
import "./App.css";
import Todo from "./Todo.js";
function App() {
  const [todoList, setTodoList] = useState([
    "밥 먹기",
    "물어보살 보기",
    "책 읽기",
  ]);
  const todosMap = todoList.map((todoList) => <li>{todoList}</li>);

  const inputChange = (e) => {
 setTodoList(todoList.concat(e.target.value));
    console.log(todoList);
  };

  return (
    <div className="App">
      <p>오늘의 할 일</p>
      {todosMap}
      <input onChange={inputChange}></input>
    </div>
  );
}

export default App;

방법2 spread

state안의 배열 복사 -> 그 복사한 배열을 수정 -> 그 수정한 값으로 state 수정

버튼을 눌렀을 때, input 값을 state에 추가 하기

버튼 클릭 => input 값 추가하기
onClick메서드

시도1

      <button onClick={inputSave}>저장</button>

  const inputSave = (e) => {
    console.log(e.target.value);
    setTodoList(todoList.concat(e.target.value));
  };

이렇게 했는데 자꾸 e.target.value가 빈 값으로 나왔음.. 왜그러지 했는데 저 (e)가 버튼에 대한 이벤트니까 당연ㅋ

방법1

import React, { useState } from "react";
import "./App.css";
import Todo from "./Todo.js";
function App() {
  const [todoList, setTodoList] = useState([
    "밥 먹기",
    "물어보살 보기",
    "책 읽기",
  ]);
  const todosMap = todoList.map((todoList) => <li>{todoList}</li>);
  let [inputValue, setInputValue] = useState("");
  const inputChange = (e) => {
    setInputValue(e.target.value);
  };
  const inputSave = () => {
    setTodoList(todoList.concat(inputValue));
  };
  return (
    <div className="App">
      <p>오늘의 할 일</p>
      {todosMap}
      <input onChange={inputChange}></input>
      <button onClick={inputSave}>저장</button>
    </div>
  );
}

export default App;

(1) 인풋값을 저장할 state 만들기

  let [inputValue, setInputValue] = useState("");

(2) 인풋이 onChange할 때 state변경

  const inputChange = (e) => {
    setInputValue(e.target.value);
  };

(3) 저장 버튼 클릭할 때, inputSave 함수 실행

   <button onClick={inputSave}>저장</button>

(4) 인풋값이 저장된 state를 원래 렌더링하는 state에 추가하기

  const inputSave = () => {
    setTodoList(todoList.concat(inputValue));
  };

Submit 했을 때, input값을 state에 추가하기

참고영상 https://www.youtube.com/watch?v=UFtirvA6NDU&t=267s

(1) 인풋값을 저장할 state 만들기

(2) input의 value를 그 state로 만들기
나는 input의 value를 유저가 작성하면, 그 value를 state로 옮긴다고 생각했다. 그런데 그게 아니라 반대였다.

(3) input에 onChange 메서드 사용하기
인풋에 작성할 때, 그 state를 변경한다. 결과적으로 그렇게 된다.

(4) form 태그로 감싸고 onSubmit 메서드 사용하기
submit가 발생됐을 때, preventDefault()실행해서 새로고침 막기

(5) button type=submit

import React, { useState } from "react";
import "./App.css";
import Todo from "./Todo.js";
function App() {
  const [todoList, setTodoList] = useState([
    "밥 먹기",
    "물어보살 보기",
    "책 읽기",
  ]);
  
  const todosMap = todoList.map((todoList) => <li>{todoList}</li>);
  let [inputValue, setInputValue] = useState("");
  
  const inputSubmit = (e) => {
    e.preventDefault();
    setTodoList(todoList.concat(inputValue));
  };
  
  const inputChange = (e) => {
    setInputValue(e.target.value);
  };
  
  return (
    <div className="App">
      <p>오늘의 할 일</p>
      {todosMap}
      <form onSubmit={inputSubmit}>
        <input value={inputValue} onChange={inputChange}></input>
        <button type="submit">저장</button>
      </form>
    </div>
  );
}

export default App;

코드는 이렇다. 그런데 저장 버튼을 누르고 나면 input칸이 비워지지 않고 그대로 남아있다. 마저 수정하도록 하자.
setInputValue(""); 로 input값을 비워준다.

 const inputSubmit = (e) => {
   e.preventDefault();
   setTodoList(todoList.concat(inputValue));
   setInputValue("");
 };

이렇게 까지 하면 완성이다.