[React] 간단한 투두리스트(Todo-List) 만들기

리액트를 이용해 간단한 투두리스트를 만들었다.

 

사용한 기능은 useState Hook과 Array.map() 메소드뿐이다. (props도 이용 안 함.)

로컬 저장소, 중복방지, useEffect 등의 부가기능은 일절 없다.

나중에 이 프로젝트를 활용해 부가기능 연습을 할 예정이다.

 

---

완성본 이미지

---

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

function App() {

  const [inputValue, setInputValue] = useState('');
  const [todoList, setTodoList] = useState([]);

  // 서브밋 핸들러
  function handleSubmit(e) {
    e.preventDefault();
    const copyTodoList = [...todoList];
    copyTodoList.push(inputValue);
    setTodoList(copyTodoList);
    setInputValue('');
  }

  // 사용자 입력값 받기
  function getInputValue(e) {
    setInputValue(e.target.value);
  }

  // 삭제버튼 핸들러
  function handleDeleteBtn(index) {
    const copyTodoList = [...todoList];
    copyTodoList.splice(index, 1);
    setTodoList(copyTodoList);
  }

  return (
    <div id='main-container'>
      <h1 className='title'>Todo List</h1>
      <p className='made'>Made by Ryan</p>
      <form id='input-container' onSubmit={handleSubmit}>
        <input type='text' required className='input' value={inputValue} onChange={getInputValue}/>
        <button className='submit-btn'>제출하기</button>
      </form>
      <ul id='list-container'>
        {
          todoList.length !== 0 &&
          todoList.map((item, index) => {
            return(
              <li className='list-items' key={index}>
                <span>{item}</span>
                <button onClick={() => {
                  handleDeleteBtn(index);
                }}>삭제하기</button>
              </li>
            )
          })
        }
      </ul>
    </div>
  );
}

export default App;

App.js 코드

 

이용자가 입력한 값을 받아 todoList 배열에 담고 map()을 활용해 화면에  뿌려주었다.

입력한 값을 받을 때는 인풋태그와 버튼태그에 각각 onkeyDown, onClick 함수를 넣어주지 않고 <form> 태그로 감싸서 onSubmit 함수로 처리했다.

 

todoList의 기본값은 [ ] (빈배열) 이기 때문에

todoList.length !== 0 &&

코드를 이용했다.

해당 배열의 길이가 0이 아닐 때만 화면에 표시가 된다.

 

삭제 버튼을 눌렀을 때에는 배열의 index값을 받아서 Array.splice() 함수를 사용. index번째 요소를 1개 지워주는 방식을 사용했다.

 

---

리액트를 막 시작했을 때, 처음으로 접해본 프로젝트이기도 하다.

감회가 새롭고, 시간 날 때 부가 기능도 구현해서 더 좋은 앱으로 만들고 싶다.

 

---

https://github.com/mediumryan/basic_todolist_react