5/20 TIL

1. React TodoList 컴포넌트에서 map 메서드 사용 오류

• 오류 상황: map 메서드를 사용할 때 TypeError: Cannot read properties of undefined (reading 'map') 오류가 발생했습니다.
• 원인: todosm이 undefined일 가능성이 있어, map 메서드를 호출할 수 없었습니다.
• 해결 방법:
  • todosm이 배열인지 확인하고, 배열이 아니면 빈 배열로 설정하는 방법을 사용했습니다.
  • 코드 예시:

    export default function TodoList({ todosm, removeTodo, toggleTodo }) {
      const todosArray = Array.isArray(todosm) ? todosm : [];
      return (
        <div>
          {todosArray.map((todo) => (
            <TodoItem
              key={todo.id}
              todo={todo}
              removeTodo={removeTodo}
              toggleTodo={toggleTodo}
            />
          ))}
        </div>
      );
    }

  • 이 방법으로 todosm이 배열이 아닐 때 발생할 수 있는 오류를 방지할 수 있었습니다.

2. 변수 이름 오류

• 오류 상황: 코드 내 todosm을 사용했지만, 의도했던 변수 이름은 아마도 todos였을 것입니다.
• 원인: 변수 이름이 잘못되어, 의도한 데이터를 사용하지 못했습니다.
• 해결 방법:
  • 변수 이름을 올바르게 todos로 수정하거나, 함수의 매개변수 이름을 todosm에서 todos로 변경하는 것이 바람직할 것입니다. 하지만, 제공된 코드상에서는 todosm의 이름을 사용한 부분만 수정하여 해결하였습니다.

배운 점

• 안전한 코딩 습관: React에서 배열을 다룰 때는 해당 변수가 정말 배열인지 확인하는 습관이 중요하다는 것을 배웠습니다. Array.isArray() 함수를 사용하면 이러한 확인을 쉽게 할 수 있습니다.
• 명확한 변수명: 변수명은 코드의 가독성과 유지보수성에 큰 영향을 미칩니다. 변수명을 명확하게 지어서, 코드를 읽는 사람이 쉽게 이해할 수 있게 하는 것이 중요합니다.