라이브러리 커스텀하던 중 질문드립니다.

React
1

안녕하세요. 라이브러리 작업하다가 너무 헤매서 질문드립니다.
react-tinder-card라는 라이브러리 이용해서 스와이프 기능을 구현하고 있습니다.
라이브러리는 마우스로 클릭해서 좌우로 밀면 스와이프되는 기능이 전부인데
회사 기획에 따라 제가 스와이프할 카드를 클릭하면 카드가 이미지모드에서 글자만 보이게 바뀌는 기능을 넣었습니다.

라이브러리에 없는 클릭이벤트를 추가한 셈인데, 그래서 이벤트가 꼬인건지 이상하게 카드를 클릭해서 글자모드로 전환을 하면 클릭한 카드만 바뀌는게 아니라 뒤에 남은 카드들도 글자모드로 동시에 변한다는 점입니다.

코드가 길고 복잡해서 간략하게 바꿔서 적었는데
아래처럼 스와이프할 카드들을 db라는 변수에 담아 map으로 돌리고 있고 card라는 div클릭하면
이미지 보여줄지 텍스트 보여줄지 바뀌게 해놨는데 왜 뒤에 카드들도 동시에 바뀔까요 ㅠㅠ
며칠째 헤메고 있는데 원인이나 해결할 수 있는 대략적인 방향이라도 알려주시면 감사하겠습니다.

const db: any[] = [
    {
      cardIdx: 1,
      imageUrl: 'url1',
      text: 'card 1'
    },
     {
      cardIdx: 2,
      imageUrl: 'url2',
      text: 'card 2'
    },
     {
      cardIdx: 3,
      imageUrl: 'url3',
      text: 'card 3'
    },
  ];

const [list, setList] = useState(db);
const [imgMode, setImgMode] = useState(false);

function onClickChangeMode(){
  setImgMode(!imgMode);
}

return (
  <div>
   {list.map((card, idx) => (
     <TinderCard>
       <div className="card" onClick={onClickChangeMode} aria-hidden="true">
         {imgMode ? 
           (<div><img src={card.imageUrl} /></div>)
           :  
           (<div><p>{card.text}</p></div>)
         }
       </div>
     </TinderCard>
    )
   }
  </div>
)
2

지금 첨부하신 코드만 봤을 때는 imgMode하나로만 카드 전체에 대해 동일하게 mode(이미지 혹은 글자)를 지정하고 있어서 모두다 바뀌는 것을 보입니다.

imgMode 대신에 imgModeKey같은 이름으로 클릭한 index나 key가 될만한 구분 값을 저장하고list.map에 넘기는 함수 안에서 해당 index나 key인 경우에만 변경되도록하면 될것 같네요. :grinning: