간단한 todolist만들기로 useState 연습하기

오늘은 useState기능을 응용하여 간단한 todolist를 만들어 보았습니다!

 

구현기능

• input으로 입력값 받아서 list추가하기
• list 취소버튼, 완료버튼
• list 삭제하기

구현해 보기

1. useState import 하고 state 만들기

import { useState } from "react";

const List = () => {
  const [input, setInput] = useState("");
  //...

 

2.  브라우저에 보이는 부분을 return안에 작성해 주고 state변경함수를 만들어 필요한 곳에 적용시켜 준다.

import { useState } from "react";

const List = () => {
  const [input, setInput] = useState("");

 // input value값 변경을 위한 함수
  const inputChange = (e) => {
    setInput(e.target.value);
  };
  return (
    <>
      <h1>todolist</h1>
      <form>
        <input
          type="text"
          placeholder="할 일을 입력하세요."
          value={input}
          onChange={inputChange}
        />
        <button>추가</button>
      </form>
      <ul>
        <li style={{ textDecoration: "line-through" }}>
          공부하기
          <button>취소</button>
          <button>삭제</button>
        </li>
        <li>
          놀기
          <button>완료</button>
          <button>삭제</button>
        </li>
      </ul>
    </>
  );
};

export default List;

함수 안에 setInput(e.target.value);은 사용자가 입력값을 말합니다!

 

3. 제출하는 기능을 하는 함수 만들어서 적용하기

//...
const addTodo = (e) => {
    e.preventDefault();
    if (!input) return alert("할 일을 입력해주세요!");
  };

  return (
    <>
      <h1>todolist</h1>
      <form onSubmit={addTodo}>
        <input
          type="text"
          placeholder="할 일을 입력하세요."
          value={input}
          onChange={inputChange}
        />
        <button>추가</button>
      </form>
 //...

input태그를 form태그로 감싸주게 되면 onSubmit으로 함수를 form태그에 적용시켜 주어 함수를 실행시킬 수 있습니다.

 

🕺🏻 추가기능

4. 할 일 목록 state를 만들어주고(목록이 여러 개 나오니까 배열로 ~)

 // 할 일 목록 state
  const [list, setList] = useState([{
    id: uuidv4(),
    text: "공부하기",
    isDone: true,
  },
  {
    id: uuidv4(),
    text: "놀기",
    isDone: false,
  },])

할 일 목록 데이터

1. id - 데이터를 정확히 구분하는 용도

2. text - 내용

3. isDone - 완료여부 완료(true), 미완료(false)

 

5. state를 화면에 보여지는 부분에 작성한다.

<ul>
    {list.map((todo) => (
      <li
        key={todo.id}
        style={{ textDecoration: todo.isDone ? "line-through" : "none" }}
      >
        {todo.text}
        <button>{todo.isDone ? "취소" : "완료"}</button>
        <button>삭제</button>
      </li>
    ))}
 </ul>

삼항연산자를 사용하여 화면에 보여지는 style과 취소 완료 버튼을 구현해 주었습니다.

 

6. state 변경 함수 만들기

input에 입력 -> 추가버튼(addTodo)클릭 -> list state에 데이터 추가

const addTodo = (e) => {
    e.preventDefault();
    if (!input) return alert("할 일을 입력해주세요!");

    const newTodolist = {
      id: uuidv4(),
      text: input,
      isDone: false,
    };
    setList([...list, newTodolist]);
    setInput("");
  };

 기존에 만들어 두었던 addTodo함수에 로직을 추가해 주었습니다.

 

❌ 삭제기능

7. state 변경 함수 만들기

 const deletelist = (id) => {
    setList(list.filter((todo) => todo.id !== id));
  };
  //...
  <button onClick={() => deletelist(todo.id)}>삭제</button>

onClick에 함수를 또 만들어준 이유

- 파라미터가 들어가게 해주려면 함수를 다시 만들어주어야 합니다.

- 함수 이름만 넣으면 event 객체가 자동으로 들어갑니다.

onClick={deletelist} -> onClick{(e) => deletelist(e)

 

✂️ 수정하기

8. 수정기능 함수 만들어서 적용시키기

const ToggleTodo = (id) => {
    setList(
      list.map((todo) =>
        todo.id === id ? { ...todo, isDone: !todo.isDone } : todo
      )
    );
  };
  //...
<button onClick={() => ToggleTodo(todo.id)}>
  {todo.isDone ? "취소" : "완료"}
</button>

 

처음에는 useState를 왜 써야 하는 건지 삼항연산자를 어떻게 어디에 써야 하는 건지 감도 안 오고 어려웠지만 계속 연습하다 보니 점점 손에 익고 혼자 코드를 짤 수 있는 능력이 생기는 것 같아서 너무 뿌듯하다 🤭

아직 많이 부족하지만 쉬운 것부터 차근차근 익혀 나가야겠다~~ 내일도 화이팅