[트러블 슈팅] data.map()에서 element에 component 연결

 저의 가장 최근 프로젝트는 B2C 애완용품 쇼핑몰 ‘모두댕냥'입니다.

 

 제가 구현했던 마이페이지에서는 ‘회원탈퇴'나 ‘상품삭제' 등과 같은 delete 통신에는 modal 을 만들어 고객의 의사를 재확인하는 절차를 거쳤습니다.  해당 모달이 여러 곳에서 쓰였기 때문에 재사용이 가능하도록 만드는 것이 목표였습니다.

 

모달이 사용되는 경우의 수는 크게 두 가지 입니다. 단일수준 json 형태의 데이터에서 data.userId 를 사용하는 경우와 , {data.map (element, index)=>{...}} 의 형태에서 element의 식별id를 전달해서 delete를 실행하는 경우입니다. 

 

 

 첫 번째 경우의 수에는 delete 통신을 하는 함수와 ,  식별Id , 사용자에게 보일 키워드를 함께 props 로서 전달했으며 정상작동 했습니다.

 

```

{modalOpen && <Modal setModalOpen={setModalOpen} axiosfunction={deleteUser} data={userData.userId} keyword="회원탈퇴" />}

{modalOpen && <Modal 
    setModalOpen={setModalOpen} 
    axiosfunction={deleteUser} 
    data={userData.userId} 
    keyword="회원탈퇴" />}

```

 

 그런데 두 번째 경우인 {data.map(element,index)=>{...}} 형태로 뿌려준 각 element에 모달을 사용하고자 할 때에는 삭제하려는 데이터를 식별할 pk를 전달하지 못하고, element 중 마지막의 pk를 전달하는 것을 확인했습니다.

 이러한 현상이 발생하는 이유는 .map으로 datadata의의 전체를 이미 순회했기 때문에 element 는 data의 마지막 요소를 참조하고 있기에 element.Id 형태로 prop을 넘겨주게 된다면 마지막 Id 가 넘어가기 때문이었습니다.

 

 이 문제를 해결하기 위해서 ‘삭제’버튼을 누를 때에 onClick이벤트로 삭제할 데이터의 인덱스를 저장하도록 했으며 

              <button
				...
                onClick={() => {
                  setModalIndex(index);
                  ...
                }}
              >
                상품 삭제
              </button>

 

아래와 같이 데이터 전체를 인덱스와 함께 넘겨주도록 했습니다. 

{modalOpen && (

               <Modal

                 setModalOpen={setModalOpen}

                 axiosfunction={deleteItem}

                 data={itemData}

                 index={itemData.findIndex((element, index) => index === modalIndex)}

                 objectKey="productId"

                 keyword="상품삭제"

               />

             )}

 

또한 모달 내에서 data 안에서 원하는 삭제 데이터의 식별자를 찾아서 삭제 요청을 보내도록 작성했습니다. 

또한 한 컴포넌트 내에서 두 가지 경우의 수를 모두 처리하기 위해서 modal 내에서 props 에 따라 분기해서 다르게 작동하도록 함으로써 해결했습니다. 

  export default function Modal(props) {

  ...
  
  const submitHandle = (e) => {
    if (!props.index && !props.objectKey) {
      //!인덱스나 키값이 필요없는 모달 사용시
      console.log(e);
      props.axiosfunction(props.data);
      props.setModalOpen(false);
    } else {
      //! .map(el, index ) 에서 인덱스나 키값이 필요한 모달 사용시
      console.log(e);
      console.log(props.data); //원본 데이터 객체 가져옴
      console.log(props.index); //modal 버튼에 해당하는 인덱스
      console.log(props.objectKey); //객체에서 접근하고자 하는 원하는 키 이름
      
      const key = props.objectKey;
      
      props.axiosfunction(props.data[props.index][key]);
      props.setModalOpen(false);
    }
  };
  
  ...
  }

 

아쉬움

 제가 작성한 방법대로 코드가 잘 작동하기는 했지만 data 전체와 key의 이름을 넘기는 등 복잡한 구조를 지니게 되었기에 더 쉽고 이해가능한 코드를 작성하지 못한 것이 아쉬움으로 남았습니다.