[react] 클릭으로 다중 필터 구현하기

부제 : 코드는 간단히

기능

감정이 하나도 선택되지 않았을 때는 모든 감정이 출력된다.

감정들

 

지금 진행중인 사이드 프로젝트에서 감정별 일기를 확인할 수 있는 필터를 만들 예정이다

  const [filterList, setFilterList] = useState({
    moodTags: {
      normal: false,
      mad: false,
      sad: false,
      happy: false,
    },
  });

처음 낸 아이디어는 다음과 같이 객체를 선언하고

감정이 클릭 되면 해당 감정에 해당하는 부분이 true가 되어 true 인 감정에 대한 일기가 출력되도록 할 생각이었다.

 

  const handleFilter = (mood) => {
    console.log(mood);
    const moodType = mood;
    const newObj = filterList;
    console.log("무드 타입", newObj.moodTags[moodType]);
    newObj.moodTags[moodType] = !newObj.moodTags[moodType];
    setFilterList({ ...newObj });
    console.log(filterList);
  };

코드는 해당 방식으로 구성하였다

---

처음에 구성했던 코드

 // 오류코드
  
  const handleFilter = (mood) => {
    console.log(mood);
    const moodType = mood;
    setFilterList({
      moodTags: {
        ...filterList.moodTags,
        [moodType]: !filterList.moodTags[moodType],
      },
    });
    console.log(filterList);
  };

이렇게 클릭을 하면 해당 감정의 index값이 추가로 저장이 되었는데 넘겨주는 값이 index 값이라 그런 문제가 발생하였었다.

 

 

결과적으로 감정을 클릭하면 해당 감정이 true 가 되도록 수정을 할 수 있었지만 그것을 다시 각각의 일기에 넘겨주고 해당 감정의 일기만 읽도록 어떻게 하느냐...!

 

일기를 각각 출력해주는 컴포넌트에 moodTags객체를 보내주고 다시 그것을 해체하고, 재구성 하여 배열에 담아주고

map을 통해 돌면서 mood 값과의 일치 여부를 확인하는 방법은 어떨까? 하고 짜봤는데...!

완전 복잡하다

 

그래서 어떻게 짜는게 좋을까 한참... 한참... 정말 한참 고민했는데 두번째로 생각한 방법은

 

그냥 애초부터 배열에 현재 클릭되어 있는 값 받아서 일기 불러오는 컴포넌트에 넘기기...

 

function MainContent() {
  // 코드 생략
  // 배열 생성
  const [filter, setFilter] = useState([]);


  // 코드 생략
  // 감정 필터를 filter에 추가시키기
  const handleFilter = (mood) => {
  	// 감정 필터 삭제
    if(filter.includes(mood)){
      setFilter(filter.filter(select => select != mood))
    }else{
    // 추가
      setFilter([...filter, mood])
    }
  };
  
  return (
    <>
      <Header />
      <WriteButton />
      <div className="main-mood-container">
        <ul>
          {moodDatas &&
            moodDatas.map((item) => (
              <li onClick={() => handleFilter(item.mood)}>
                <img key={item.mood} src={item.img_select} alt="일기" />
              </li>
            ))}
        </ul>
      </div>
      {mainDiary && mainDiary.length === 0 ? (
        <div>작성된 일기가 없습니다</div>
      ) : (
        <div className="pin_container">
          {mainDiary &&
            mainDiary.map((item) => (
            
              // 일기 데이터에 filter 데이터 내려보내기
              
              <DiaryItem key={item.id} item={item} filter={filter} setFilter={setFilter} />
            ))}
        </div>
      )}
    </>
  );
}

export default MainContent;

객체를 사용하는 방법은 아예 포기하고 배열을 활용해서 다중 선택 필터를 구현해봤다.

이런식으로 만드는게 효율적인지는 모르겠으나...! 일단 고민 후 동작하게 만들었다!

필터는 처음으로 맡아서 만들어봤는데... 그래도 일단 돌아가서 뿌듯!

 

객체를 사용한 방법을 사용했을 때 보다 훨씬 간단해보이고 짧은 코드를 만들었다

아마... 그냥 내가 객체를 사용해서 만드는 방법을 잘 몰라서 더 복잡하게 짜서 그랬을수도 있다.

누군가 같이 코드 리뷰도 하고 그런 사람이 있으면 좋겠다...ㅠㅠㅠ