6-11 TIL

알겠습니다. 오늘 물어본 내용에 대한 TIL(Today I Learned)을 작성해드리겠습니다.

TIL (Today I Learned) - 2024년 6월 11일

React와 Redux를 이용한 투두리스트 애플리케이션 오류 해결

오늘은 React와 Redux를 사용하여 투두리스트 애플리케이션을 구현하는 과정에서 발생한 문제를 해결했다.

문제점:

• TodoForm에서 작성한 제목과 내용이 TodoList에 제대로 표시되지 않는 문제.

원인:

• TodoList 컴포넌트에서 TodoItem 컴포넌트로 props를 전달할 때, 단일 객체로 전달하면서 TodoItem에서 기대하는 id, title, content 등의 개별 props가 제대로 전달되지 않았다.

해결 방법:

• TodoList 컴포넌트에서 TodoItem 컴포넌트로 props를 개별적으로 전달하도록 수정했다.

import TodoItem from "./TodoItem";
import React from "react";
import { useSelector } from "react-redux";

export default function TodoList({ isDone }) {
  const todos = useSelector((state) =>
    state.todos.filter((todo) => todo.isDone === isDone)
  );

  return (
    <section>
      <ul>
        {todos.map((todo) => (
          <TodoItem 
            key={todo.id} 
            id={todo.id} 
            title={todo.title} 
            content={todo.content} 
          />
        ))}
      </ul>
    </section>
  );
}

배운 점:

• React 컴포넌트 간 props 전달 시, 올바른 형태로 전달하는 것이 중요하다는 점.
• Redux를 사용하여 상태 관리를 할 때, 컴포넌트 연결 및 데이터 전달에 주의를 기울여야 한다는 점.