[TIL] 22.01.14 리스트 목록 토글 구현

 

 

 

설명 

다이어리 페이지 찜 리스트 목록 리스트에 토글을 눌렀을 때 MixBox안에 음원 정보의 데이터가 나타나며 각 목록의 타이틀 수정과 삭제를 할 수 있어야 한다.

 

첫 번째 도전!

목록이 각각 선택되었을 때  토글의 state상태를 true, false로 바꿔주면서 MixBox true일 때 MixBox 가 나타나는 코드를 구현했었다 

그러니...😭

1개의 리스트를 선택했는데 모든 리스트의 MixBox가 나타나는 현상이 발생되었는데 아마  state상태를 true, false 로만 설정하다 보니 playlist 가 맵핑 과정에서 모든  리스트가 true로 인지해서  MixBox가 나타나는 것이었다

두 번째 도전!

선택했을 때 각각의 리스트를 따로 제어할 수 있을까 고민을 하다가  map함수의 index를  사용해서 각각 제어해보자라고 생각을 했고 적용 결과 리스트들이 각각 따로 적용되는 것을 확인했다 

하지만 여기서 또 하나의 문제가 발생했다... 😭 😭

인덱스 값으로 true, false 제어하다 보니  리스트가 삭제되었을 때 해당 삭제된 리스트의 인덱스 +1 번째 리스트가 그대로 토글이 true인 상태가 되면서 MixBox가 열리는 것이었다! 

세 번째 도전!

여기서 인덱스는 사용할 수 없겠다고 생각을 했고  DB에서 받아오는 데이터에서 해당 리스트의 고유한 리스트의 Idx값을 보내주는 것을 이용해서 index가 아닌 playlistIdx 사용해서 적용해보았고 

해당 리스트가 삭제가 되어도 리스트의 고유한 인덱스 값을 다른 리스트에게 적용될 수 없었다!!

            {playList.map((item, idx) => {
              return (
                <div key={idx}>
                  <List
                    icon={mixList}
                    src={toggle[item.playlistIdx] ? path_T : path_B}
                    _onClick={() => toggleComment(item.playlistIdx)}
                  >
                    {item.mixTitle}
                  </List>
                  {toggle[item.playlistIdx] ? (
                    <MixBox
                      mixList={item.mixList}
                      playlistIdx={item.playlistIdx}
                      mixTitle={item.mixTitle}
                      toggle={toggle}
                    ></MixBox>
                  ) : null}
                </div>
              );
            })}

 const [playList, setPlayList] = React.useState(
    playListInfo ? playListInfo : null
  );
  //-- 토글 -- 
  const [toggle, setToggle] = React.useState({});

//-- 토글 클릭시 -- 
  const toggleComment = (idx) => {
    setToggle((prevToggle) => ({
      ...prevToggle,
      [idx]: !prevToggle[idx],
    }));
  };

 

 

 

 

---

+ 오늘 한일

이번 주 팀원들과 목표 진행상황을 정리해보니 뭔가 엄청 바쁘게 많이 했다고 생각했는데 완료된 부분이 많이 없었다 

아마 믹스 페이지(찜하기) 추가 기능 구현에 중심을 먼저 두다 보니 성능 최적화, CICD 등의 목표를 진행하지 못한 것 같아서 아쉬움이 남는다 

4주 동안 아직 해결하지 못했던 PWA푸시 알림에 대해서 오늘마저 찾아보고 내일 테스트를 진행해봐야 할 것 같다 

백엔드분들이 아직 개발하지 못한 부분이 있어서 PWA 푸시 알림 부분은 node관련 자료도 함께 스크랩해서 내일 백분들과 이야기를 해봐야 할 것 같다

 

 

 

 

 

 

 

푸쉬알림아 너 왜 이렇게 만나기 어렵니??? ^^