React | nomadcoders 5/n

#6.4 Cleanup

잘 쓰지 않는다고 하니 우선 스킵함.

#7.0 To Do List part one

toDo 변수를 입력한 값으로 바꾸는 코드 작성.

import './App.css';
import { useState } from 'react';

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  console.log(toDo);
  return (
    <div>
      <form>
        <input 
          onChange ={onChange} 
          value={toDo} 
          type="text" 
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      
    </div>
  );
}

export default App;

이렇게 작성할 경우 버튼을 누르면 제출 기능으로 값이 지워진다. 이를 막기 위해 onSubmit 함수를 만들자.

import './App.css';
import { useState } from 'react';

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    console.log(toDo);
  }
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input 
          onChange={onChange} 
          value={toDo} 
          type="text" 
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      
    </div>
  );
}

export default App;

다음 조건문을 onSubmit 함수 안에 넣어 toDo가 빈 값일 때는 함수가 작동하지 않도록 한다.

if(toDo === ""){
      return;
    }

제출 후에는 input을 비운다.

setToDo("");

전체 코드

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    setToDo("");
  }
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input 
          onChange={onChange} 
          value={toDo} 
          type="text" 
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      
    </div>
  );
}

export default App;

이번에는 toDos 배열 변수를 만들어 값을 넣어보자.
일반적인 자바스크립트라면 toDos.push()를 사용했겠지만, react에서는 직접적으로 값을 변경할 수 없다.

아래 코드에서는 현재 값currentArray에 새 toDo를 추가하는 것을
...currentArray로 표현한다.

setToDos(currentArray => [toDo, ...currentArray]);

다음 코드를 실행하면 toDos에 값이 쌓이는 것을 볼 수 있다. (값을 입력하고 엔터)

import './App.css';
import { useState } from 'react';

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    setToDo("");
    setToDos(currentArray => [toDo, ...currentArray]);
  };
  console.log(toDos);
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input 
          onChange={onChange} 
          value={toDo} 
          type="text" 
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      
    </div>
  );
}

export default App;

아래 제목 추가하고 toDos의 길이 확인하기.

<h1>My To Dos ({toDos.length})</h1>