[React] To do list (할일목록)

my_react_app.zip

0.18MB

🔧 사용하는 도구

도구                                          설명

 

React	사용자 화면(UI)을 만들기 위한 라이브러리
TypeScript	자바스크립트에 타입(자료형)을 추가한 언어
useState	React에서 상태(state)를 저장하는 기억장치

 

🧠 개념 먼저 살짝만 이해하고 가요!

❓ State (상태)?

• 쉽게 말해 기억 저장소
• 우리가 입력한 내용, 추가된 할 일 목록 등을 기억해줌
• 상태가 바뀌면 화면도 자동으로 다시 보여줌 (이게 React의 핵심!)

 

🧱 전체 코드 구조 한눈에 보기

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

이름                                          뜻

input	사용자가 입력한 글자
setInput	그 글자를 기억장치에 저장하는 함수

 

const [todos, setTodos] = useState<Todo[]>([]);

이름                                             뜻

todos	할 일 목록 전체를 담고 있는 배열
setTodos	목록을 추가하거나 수정하는 함수

 

 

1️⃣ 사용자 입력 처리

<input
  value={input}
  onChange={(e) => setInput(e.target.value)}
  onKeyDown={(e) => {
    if (e.key === "Enter") addTodo();
  }}
/>
<button onClick={addTodo}>추가</button>

💡 요점 요약

• value={input}: React에서 input의 값을 기억함
• onChange: 사용자가 입력할 때마다 input에 저장
• onKeyDown: Enter 키 누르면 추가 기능 실행
• onClick: 버튼 누르면 할 일 추가

 

2️⃣ 할 일 추가 기능

const addTodo = () => {
  if (!input.trim()) return;
  const newTodo = {
    id: Date.now(), // 시간으로 고유 번호 생성
    text: input, // 사용자가 쓴 글
    isEditing: false // 지금 수정 중인지 여부
  };
  setTodos([...todos, newTodo]); // 기존 목록(todos) 뒤에 붙여서 저장해요.
  setInput(""); // 입력창을 비워줘요.
};

 

🧠 개념 요약

• Date.now() → 고유한 번호 만들어주는 트릭
• ...todos, newTodo → 기존 목록 뒤에 새 할 일 추가

 

3️⃣ 할 일 목록 보여주기

<ul>
  {todos.map((todo) => (
    <li key={todo.id}>
      ...
    </li>
  ))}
</ul>

map() 함수로 todos 배열을 하나하나 꺼내서 <li>로 보여줌

 

 

4️⃣ 수정 모드 vs 보기 모드

{todo.isEditing ? (
  <input
    defaultValue={todo.text}
    onBlur={(e) => saveEdit(todo.id, e.target.value)}
    onKeyDown={(e) => {
      if (e.key === "Enter") {
        saveEdit(todo.id, (e.target as HTMLInputElement).value);
      }
    }}
  />
) : (
  <>
    <span>{todo.text}</span>
    <button onClick={() => startEdit(todo.id)}>수정</button>
    <button onClick={() => deleteTodo(todo.id)}>삭제</button>
  </>
)}

요소                                                                              설명

isEditing === true	입력창 보여줌 (수정 중)
isEditing === false	글자 + 수정/삭제 버튼 보여줌

 

 

5️⃣ 수정 기능 설명

const startEdit = (id: number) => {
  setTodos(todos.map((todo) =>
    todo.id === id ? { ...todo, isEditing: true } : todo
  ));
};

 

• 수정 버튼 누르면 isEditing: true로 바뀜
• 그러면 input창이 나타남!

 

6️⃣ 수정 저장 기능

const saveEdit = (id: number, newText: string) => {
  setTodos(todos.map((todo) =>
    todo.id === id ? { ...todo, text: newText, isEditing: false } : todo
  ));
};

 

글자를 바꾸고 Enter 누르거나 포커스를 잃으면 수정 완료됨

 

 

7️⃣ 삭제 기능

const deleteTodo = (id: number) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

해당 id를 가진 할 일을 제외한 나머지만 다시 저장!