[NewsFeed-Day 5] data 필터링하기(검색어 및 카테고리)

2025.02.16 (일) Works

 

1. 검색어 필터링

   1-1. 엔터 검색

   1-2. join 해서 데이터 가져오기

   1-3. 검색 value 필터링

2. 장소 필터링 (전체 / 국내 / 국외)

   2-1. onClick 이벤트 주기

   2-2. 필터링 함수 만들기

 

 

 

검색어 필터링

 

엔터 검색

검색 함수 내부에 엔터로 검색하는 기능을 추가했다.

검색 후에는 검색창이 빈 값으로 설정된다.

// SearchInput.jsx
const handleSearch = e => {
	if (e.key === "Enter") return;
    setSearchInput("");
};

 

 

join 해서 데이터 가져오기 & 검색 value 필터링

검색이 되는 값들을

글 제목, 닉네임, MBTI, 글 내용으로 정했다.

따라서 네 개의 값에 검색 내용이 있는 지 includes로 판별한 후, 해당되는 posts(검색값)을 그려줘야 했다.

 

아래 로직을 살펴보면 posts(게시글 데이터)에 filter 메서드를 사용해야 하기 때문에

posts 배열에 닉네임과 mbti가 포함되어 있어야 했다.

// SearchInput.jsx

const keyword = searchInput;   👉🏻 입력값 state를 'keyword' 변수로 지정

    const searchPosts = posts.filter(post => {  👉🏻 전체 게시글에서 검색 내용에 해당하는 글을 filter
      return (
        post.title.includes(keyword) ||  👉🏻 제목 판별
        post.content.includes(keyword) ||   👉🏻 내용 판별
        post.users?.nickname.includes(keyword) ||   👉🏻 닉네임 판별
        post.users?.mbti.includes(keyword.toUpperCase())   👉🏻 mbti 판별
      );
    });

    setChangePosts(searchPosts);   👉🏻 필터링 한 값 setState

 

 

supabase API 중 테이블의 전체 데이터를 가져오는 방법 뿐만 아니라 다른 테이블의 colomn 값을 함께 가져올 수 있는 방법이 있다.

// HomeContext.jsx
supabase.from("posts").select("*, users(nickname, mbti)")

 

 

posts의 값을 콘솔에서 확인해보면 'users' 의 값도 잘 가져와졌다.

 

 

 

장소 필터링 (전체 / 국내 / 국외)

 

 

onClick 이벤트 주기

전체 / 국내 / 국외 div에 onClick 이벤트를 부여한다.

// Home.jsx

return (
      <StCategoryContainer>
        <StCategory onClick={() => showPosts("all")}>전체</StCategory>
        <StCategory onClick={() => showPosts("in")}>국내</StCategory>
        <StCategory onClick={() => showPosts("out")}>국외</StCategory>
      </StCategoryContainer>
      ...

 

 

 

필터링 함수 만들기

onClick 이벤트에 사용될 함수를 작성한다.

 

 

🚨트러블 슈팅 1 

필터링한 값에 또 필터링이 되는 현상이 반복되어 제대로 정렬이 되지 않았다.

 

시도 1. 얕은 복사

tempPosts = [...post]; 로 얕은 복사를 하여 필터링에 사용했다.

 

시도 2. 깊은 복사

structuredClone() 을 사용하여 깊은 복사의 값을 필터링에 사용했다.

 

시도 3.  card에 직접 값 부여

필터링한 값을 card 로직에 직접 넣어주었다.

(card 로직은 카드 형태를 그려주기만 하므로 잘못된 접근이다.)

 

 

! 문제 원인 : 필터링한 값을 setPosts에 주어 posts의 값 자체가 바뀌는 중이었다.

 

 

✨해결 방법

Context에서

const [ changePosts, setChangePosts ] = useState([...posts]);

로 카드 리스트를 state로 관리했다.

 

 

🚨트러블 슈팅 2

정렬은 잘 되지만 페이지를 새로고침하면 카드리스트가 뜨지 않았다.

 

콘솔에 확인해보니 posts의 값이 빈 배열이었다가 나타나는 것을 확인했다.

! 문제 원인 :  화면이 다 그려지고 난 후, DB에서 데이터를 가져오기 때문에 뒤늦게 값이 반영되는 것이다.

 

✨해결 방법

useEffect 를 사용하여 posts의 값이 변할 때, useEffect가 한 번 더 실행된다.

따라서 의존성 배열에는 변하는 기준의 값을 넣어주고, 함수 내부에는 실행할 로직을 작성한다.

useEffect(() => {
    setChangePosts(posts);
  }, [posts]);

 

 

 

최종 로직

styled-commponents 생략

// Home.jsx
...

useEffect(() => {
    setChangePosts(posts);
  }, [posts]);

  const showPosts = where => {
    if (where === "all") {
      setChangePosts([...posts]);
      return;
    }
    if (where === "in") {
      const filterInPost = posts.filter(post => {
        return post.travel_location === "국내";
      });
      setChangePosts(filterInPost);
      return;
    }
    if (where === "out") {
      const filterOutPost = posts.filter(post => {
        return post.travel_location === "국외";
      });
      setChangePosts(filterOutPost);
      return;
    }
  };

  const showModal = post => {
    setSelectedPost(post);
  };

  return (
    <>
      <StCategoryContainer>
        <StCategory onClick={() => showPosts("all")}>전체</StCategory>
        <StCategory onClick={() => showPosts("in")}>국내</StCategory>
        <StCategory onClick={() => showPosts("out")}>국외</StCategory>
      </StCategoryContainer>
      <div>
        {changePosts.map((post, index) => {
          return (
            <MoveModal
              key={`${post.uid}-${index}`}
              onClick={e => {
                if (e.target.classList.contains("heart")) {
                  return;
                }
                showModal(post);
              }}
            >
              <HomePostCard post={post} />
            </MoveModal>
          );
        })}
      </div>
      {isSignin === true ? <AddPostButton /> : null}
      {selectedPost && (
        <ShowModal
          post={selectedPost}
          closeModal={() => setSelectedPost(null)}
        />
      )}
    </>
  );
};

export default Home;