[React] 리액트로 아주 간단한 todo-list 만들기

useState를 연습해보기 위해 간단한 일정 관리 앱을 만들어 보자.

 

※기능 연습이라 css는 적용하지 않음.

1. input과 버튼 생성

우선 할 일을 적을 input 창과 등록을 하기 위한 버튼을 만들어 주자.

function App() {

  console.log(toDos);
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add TO Do</button>
      </form>
    </div>
  );
}

export default App;

아주 간단한 입력창과 버튼이 만들어졌다.

 

2. input창에 어떤 값이 들어왔는지 확인

우리는 입력창에 어떤 값이 들어 왔는지 알아야 한다.

입력 창에 어떤 값이 들어왔는지 알기 위해서는 useState를 사용해서 

어떤 값이 들어 왔는지 계속 업데이트를 해 줘야 한다.

import { useState } from "react";

function App() {
  const [toDo, setTODo] = useState("");
  const onChange = (event) => {
    setTODo(event.target.value);
  };
  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;

useState를 사용해 처음에는 빈 값인 ""로 설정해 준다.

그 다음 input창의 onChange 속성을 통해 input 창의 값이 바뀔 때마다 

그 값을 가져와 준다.

 

콘솔 찍은 모습

 

3. 할일 등록했을 때 배열에 저장하기

ToDo list를 만들려면 위에서 들어 온 값이

버튼을 눌렀을 때 등록되어야 하지 않는가?

그 기능을 만들기 위해 form에 onSubmit을 줘서 등록을 하게 만들어야 한다.

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>
      <h1>My To Dos ({toDos.length})</h1>
      <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;

추가된 코드를 위해서 부터 설명하자면

const [toDos, setToDos] =useState([]);

이 부분은 할 일의 리스트를 담기 위해 만든 것이다.

초기값을 빈 배열로 만들어 할 일이 추가 될 때마다 업데이트 해서 배열에 추가할 것이다.

 

이 부분은 form이 제출될 때 실행되는 함수이다.

1. 우선 event.preventDefault()를 사용해서 새로 고침을 막아줬다.
2.  그 후 if문을 통해 input창에 들어 온게 없는 상태에서 제출을 하면 그냥 retrun하게 만들어 준 후
3.  setToDos로 배열을 업데이트 해준다.(여기서 [toDo, ...currentArray]는 현재 있는 배열에 toDo를 추가해준다는 의미이다.)
4. .그 후 setToDo에 빈 값을 넣어 값을 초기화 해준다.

4. 화면에 뿌려주기

이제 배열에 담은 리스트들을 화면에 출력시켜 주기만 하면 끝난다.

우선 코드 먼저 보자.

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>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          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;

추가된 부분은 

아래의 ul 태그 부분이다.

ul 태그 안에 toDos.map()이라는 함수가 있다.

toDos는 리스트를 담고있는 배열인데

map은 대체 무엇일까?

 

map은 반복문이라고 생각하면 된다.

한마디로 toDos 안에 있는 리스트들을 하나씩 꺼내서 출력해 주는 거라고 생각하면 된다.

 

이렇게 하면 아주아주 간단한 todo list 완성이다.