🙆🏻‍♀️ [React] 1 : N 모달창 🙆🏻‍♀️

각 li에 대응하는 모달창🧝🏻‍♀️

API 요청으로 받아온 데이터를 map()으로 ul의 li에 뿌려줬다.
그 뒤, 버튼을 누르면 해당 데이터를 기반으로 하는 모달창이 떠야 했다.

리스트의 id를 넘겨주고 modalVisibleId로 set한다.
id와 modalVisibleId와 같을 때 모달을 보여주고,
모달을 닫으면 modalVisibleId 비운다.

// SomethingList.jsx

const [modalVisibleId, setModalVisibleId] = useState("")

const onModalHandler = id => {
  setModalVisibleId(id)
}

<ul>
  {somethingList.map(list => (
   <li key={list.id}>
     {list.name} <button onClick={() => onModalHandler(list.id)}>상세</button>
     <ModalComponent
        id={list.id}
	modalVisibleId={modalVisibleId}
        setModalVisibleId={setModalVisibleId}
      />
   </li>
   ))
  }
</ul>

// ModalComponent.jsx

import React from 'react'

export default function ModalComponent({id, modalVisibleId, setModalVisibleId}) {
  const onCloseHandler = () => {
  	setModalVisibleId("")
  }
  
  return (
    <div className={modalVisibleId === id ? "d_block" : "d_none"} >
      <button onClick={onCloseHandler}>닫기</button>
      ...
    </div>
  )
}