인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

보내주신 코드 확인해보니 TodoList 컴포넌트에서 todos Prop을 전달 받는 과정중 오타가 있는 것 같습니다. 아래 그림을 보시면 const TodoList = (todos) => { ... }로 작성해 주셨는데 Props는 객체 형태로 전달되기 때문에 구조분해 할당을 이용해 const TodoList = ({todos}) => {...}로 작성하셔야 합니다.

안녕하세요, 인프런 AI 인턴입니다. Rain D님.

React에서 map 함수를 사용할 때 종종 발생하는 문제는 todos가 배열이 아닌 경우일 수 있습니다. TypeError: todos.map is not a function라는 에러 메시지가 나타나는 이유는 todos가 배열로 인식되지 않기 때문입니다. 몇 가지 확인해야 할 사항과 해결 방법을 제안드립니다:

1. todos가 배열인지 확인: console.log(todos)를 사용하여 todos의 값을 확인해보세요. todos가 배열인지 확인하는 것이 첫 번째 단계입니다.

2. Props가 올바르게 전달되는지 확인: TodoList 컴포넌트가 todos props를 제대로 받아오고 있는지 확인하세요. App 컴포넌트에서 TodoList를 호출할 때, todos를 props로 전달하고 있는지 확인하세요.

   <TodoList todos={todos} />

3. 데이터 초기화 문제 확인: App 컴포넌트에서 todos의 초기 값이 배열로 설정되어 있는지 확인하세요. 예를 들어, useState를 사용할 경우 초기 값을 빈 배열로 설정해야 합니다.
   

   const [todos, setTodos] = useState([]);

4. 데이터 변환 또는 API 호출 확인: 데이터를 외부에서 불러오고 있는 경우, API 호출 등이 비동기적으로 이루어진다면 데이터가 아직 로드되지 않았을 때 map 함수가 호출될 수도 있습니다. 이런 경우 로딩 상태를 관리하는 방법도 고려하세요.

5. 이미지 예시 및 console.log 사용: 제공된 이미지에서 todos 배열을 확인할 수 있는데, console.log(todos)를 적절한 시점에 넣어 현재 상태를 지속적으로 확인해 보세요. 예를 들면 console.log가 특정 시점에 undefined나 객체가 아닌 것으로 보이지 않는지 체크해보세요.

아래 링크는 유사한 문제와 해결 방법을 논의한 게시물입니다:
- Uncaught TypeError: data.map is not a function: 데이터가 배열이 아닌 경우 .map() 메서드를 사용할 수 없음에 대한 해결 방안.

위의 사항들을 확인하신 후에도 문제가 해결되지 않는다면, 더욱 자세한 에러 메시지나 오류 발생 상황을 추가로 설명해 주시면 도움을 드리기 더 쉽겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.