filter 기능 구현: 할 때 목록을 state로 만들 필요는 없다.

클릭하면 변경할 옵션을 filterOption state에 저장합니다.

  const [filterOption, setFilterOption] = useState("");

  const handleFilterOptionChange = (option) => {
    setFilterOption(option);
  };
// ...
        <div className="filter">
          <div onClick={() => handleFilterOptionChange("")}>전체</div>
          <div onClick={() => handleFilterOptionChange("option1")}>option1</div>
          <div onClick={() => handleFilterOptionChange("option2")}>option2</div>
        </div>

 

옵션이 변경되면 렌더링할 리스트를 filter 기능을 이용해 구현합니다.

  const filteredVideos = uploadedVideos.filter((video) => {
    if (filterOption === "") {
      return true;
    }
    return video.title.includes(filterOption) || video.description.includes(filterOption);
  });

=> if (filterOption ==="") 일 때는 전체 목록을 반환하고

선택된 option이 있을 때는 filterOption 조건에 따른 목록을 반환합니다. 

 

여기서 크게 깨달은 것은 리스트로 보여줄 목록을 반드시 state로 만들 필요가 없다는 것입니다.

 

 

const NewClip = () => {
  const [uploadedVideos, setUploadedVideos] = useState([]);
  const [filterOption, setFilterOption] = useState("");

  const handleFilterOptionChange = (option) => {
    setFilterOption(option);
  };

  const filteredVideos = uploadedVideos.filter((video) => {
    if (filterOption === "") {
      return true;
    }
    return video.title.includes(filterOption) || video.description.includes(filterOption);
  });

  return (
    <div className="new">
      <div className="title">
        <h2>제목</h2>
        <div className="filter">
          <div onClick={() => handleFilterOptionChange("")}>전체</div>
          <div onClick={() => handleFilterOptionChange("option1")}>option1</div>
          <div onClick={() => handleFilterOptionChange("option2")}>option2</div>
        </div>
      </div>
      <div className="list">
        <ul>
           {filteredVideos.map((video) => {
              const { videoId, channelId, channelTitle, publishedAt, thumbnailsUrl, title, channelThumbnailUrl, description } = video;
              return (
                <li className="clip" key={videoId}>
                // ...
                </li>
              );
            })
          )}
        </ul>
      </div>
    </div>
  );
};

export default NewClip;