React.JS) 5. 간단한 To Do List 만들기

1. input 태그 만들기

• onChange로 이벤트 연결하여 값 받아오기

import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  console.log(toDo);

  return (
    <div>
      <input 
        onChange={onChange} 
        type="text" 
        placeholder="Write your to do" />
    </div>
  );
}

export default App;

2. form 태그의 submit

import { useState, useEffect } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const onChange = (event) => setToDo(event.target.value);
  console.log(toDo);

  return (
    <div>
      <form>
        <input 
         onChange={onChange} 
         type="text" 
         placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

• submit 막기

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 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

• input 태그가 비어있을때만 submit 막기

import { useState } from "react";

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 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

3. 배열 만들기

• JS에서 배열에 추가할 때

toDos.push()

• state를 직접 수정할 수 없음
• 함수 이용하기

setToDos(currentArray => [toDo, ...currentArray]); // 새로운 배열로 만들기
setToDo(""); // 비어있는 값으로 셋팅

• 비어있는 배열 생성

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("");
  };
  console.log(toDos);
  

  return (
    <div>
      <form onSubmit={onSubmit}> 
        <input 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

• 새로운 배열에 받아오기

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;
    }
    setToDos(currentArray => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  

  return (
    <div>
      <form onSubmit={onSubmit}> 
        <input 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

4. To Dos의 갯수 나타내기

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;
    }
    setToDos(currentArray => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  

  return (
    <div>
      <form onSubmit={onSubmit}> 
        <h1>My To Dos ({toDos.length})</h1>
        <input 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
    </div>
  );
}

export default App;

5. 동적으로 List 만들기

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;
    }
    setToDos(currentArray => [toDo, ...currentArray]);
    setToDo("");
  };
  console.log(toDos);
  
  return (
    <div>
      <form onSubmit={onSubmit}> 
        <h1>My To Dos ({toDos.length})</h1>
        <input 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item) => <li>{item}</li>)}
      </ul>
    </div>
  );
}

export default App;

• 리스트를 렌더링할 때 각 요소에 고유한 "key" prop을 지정해야 함
• 고유한 키는 React가 어떤 항목이 변경되었는지, 추가되었는지 또는 제거되었는지를 식별
• 키가 없으면 React가 리스트의 항목을 효율적으로 업데이트할 수 없어서 성능 저하가 발생



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;
    }
    setToDos(currentArray => [toDo, ...currentArray]);
    setToDo("");
  };
  
  return (
    <div>
      <form onSubmit={onSubmit}> 
        <h1>My To Dos ({toDos.length})</h1>
        <input 
          value={toDo} 
          onChange={onChange} 
          type="text" 
          placeholder="Write your to do"
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

export default App;