Inflearn Community Q&A

안녕하십니까! 해당 강의를 열심히 들으며 리엑트를 공부하고 있는 대학생입니다. 듣다가 막히는 부분이 생겨 질문을 하게 되었습니다.

List.jsx 에서 검색 기능을 구현하는 부분에서 궁금한 것이 생겼습니다. 강의에서는 아래 코드처럼 getFilteredData 함수를 작성하셨습니다.

const getFilteredData = () => {
        if(search === ""){
            return todos;
        }
        return todos.filter((todo) => {
            todo.content.toLowerCase().includes(search.toLowerCase())
        });
    };

하지만 저는 아무리 오타를 점검하고 수정해도 기능이 구현이 되지 않아서 답답한 마음에 GPT를 통해 질문을 했는데 위 함수에서 return이 빠져있다고 수정해주었습니다. 아래는 GPT가 수정해준 코드입니다.

const getFilteredData = () => {
        if(search === ""){
            return todos;
        }
        return todos.filter((todo) => {
            return todo.content.toLowerCase().includes(search.toLowerCase())
        });
    };

위 코드를 보시면 filter() 안에 화살표 함수 내부에 return이 추가된 것을 볼 수 있습니다. 그리고 실제로 이렇게 수정을 하고서야 제 기능이 정상적으로 작동이 되었습니다.

왜 이런 결과가 생겼는지 궁금합니다. 제가 뭘 잘못했길래 강의와는 다르게 return을 추가해야만 기능이 제대로 구현이 되는지 여쭤보고 싶습니다.
혹시나 제가 찾지 못하는 오타가 있을까 해서 강의와 똑같이 따라한 전체 List.jsx 코드도 함께 첨부하겠습니다. 감사합니다!

import './List.css';
import TodoItem from "./TodoItem";
import {useState} from "react";

const List = ({todos}) => {
    const [search, setSearch] = useState("");

    const onChangeSearch = (e) => {
        setSearch(e.target.value);
    };

    const getFilteredData = () => {
        if(search === ""){
            return todos;
        }
        return todos.filter((todo) => {
            todo.content.toLowerCase().includes(search.toLowerCase())
        });
    };

    const filteredTodos = getFilteredData();

    return <div className="List">
        <h4>Todo List 🌱</h4>
        <input
            value={search} 
            onChange={onChangeSearch} 
            placeholder="검색어를 입력하세요"
        />
        <div className = "todos_wrapper">
            {filteredTodos.map((todo) => {
                return <TodoItem key={todo.id} {...todo}/>;
            })}
        </div>
    </div>
}

export default List;