Todos list map 관련

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.5) Read - 투두리스트 렌더링하기

해결된 질문

작성

<div className='todos_wrapper'>   {filterTodos.map((todo) => {     return <TodoItem key={todo.id} {...todo} />;   })} </div>

위에서 검색어 검색 기능을 보여 주기 위해서 filterTodos로 map 해 주는 건 이해가 가는데 처음에 초기값 보여 주는 건 어디에서 하는 건지 궁금합니다 초기값도 저기서 기능을 해 주는 거 아닌가요? 초기값은 애초에 filter 하지 않았기 때문에 todo.id에 따른 모든 값들을 보여 주는 걸까요 ??? 초기에 모든 값을 보여 주는 건 어디서 하는 건지 이해가 안 됩니다 ㅠ

javascript react node.js

답변 3

immof

질문자

아 말씀하신 게 맞습니다 감사합니다.. 저 부분을 생각 안 하고 보고 있었네요 감사합니다

이정환 Winterlood

지식공유자

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

"처음에 초기값 보여주는 건" 이라는게 검색어가 없을 경우 전체 데이터를 보여주는 기능을 말씀하시는거겠죠? 그렇다고 생각하고 답변드리겠습니다. 혹시 아니라면 알려주세요

강의에서 구현한 getFilteredData 함수를 보시면 아래의 코드처럼 if 조건문을 통해 search가 ""일 경우 그냥 todos 배열을 그대로 리턴하도록 설정해두었습니다. 이에 따라 search에 보관된 검색어가 없을 경우, 즉 사용자가 아무런 검색어를 입력하지 않았을 경우 그냥 todos 전체 배열을 렌더링 하게 됩니다.

인프런 AI 인턴

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

리액트에서 filterTodos 배열을 map 함수를 통해 순회하며 TodoItem 컴포넌트를 렌더링하는 방법에 대해 질문해 주셨습니다. 초기 렌더링 시에 모든 할 일을 표시하는 과정에서 이해가 필요하신 것 같습니다.

초기 값 렌더링: 일반적으로 filterTodos 배열이 초기에 모든 할 일을 포함하도록 설정되어 있다면, filter 함수가 실행되기 전 초기 상태에서 모든 항목이 포함됩니다. 이렇게 되면 초기 렌더링 시에 모든 항목이 화면에 표시됩니다.
검색 기능과 초기 값: 검색하기 위해 필터를 적용하지 않는 경우, 기본적으로 filterTodos는 모든 할 일의 원본 목록(todos라고 가정)을 그대로 참조하게 됩니다. 그러므로 초기값을 보여주는 것이며, 검색 조건이 없거나 초기 상태라면 원래의 todos 배열을 이용해 초기 목록을 렌더링하게 됩니다.

궁금한 점으로는 주로 다음과 같은 코드 구조가 있을 수 있습니다:

const [filterValue, setFilterValue] = useState("");
const filterTodos = todos.filter(todo => todo.content.includes(filterValue));

이 경우, filterValue가 빈 문자열이면 filter 함수는 전체 리스트의 모든 내용을 포함하게 되며, 이것이 초기 상태에서 모든 할 일을 보여주는 로직이 됩니다.

만약 구체적인 예시나 코드에서 더 상세한 설명이 필요하다면, 관련 로직이나 useState, 그리고 filter 함수 사용 방법에 대해 더 자세한 설명을 드릴 수도 있습니다.

아래 링크에서는 비슷한 상황에서 발생하는 질문들에 대한 논의가 이루어졌으니 참고하시면 좋을 것 같습니다:

“투두 필터링” - 초기값과 필터링에 관한 맥락을 이해하는 데 도움이 될 수 있습니다.

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

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

Todos list map 관련