map 기능 강의에서

[정민]

바로 전 강의에서는 
{modal === true ? <Modal /> : null}  조건식을 활용해서 여닫기 기능을 구현했었는데
map을 사용하는 강의에서는 해당 조건식을 안 쓰시는데도 모달창 기능이 구현되는 것 같던데 
저는 기능 작동이 안돼서 아래와 같이 해보니 
전체가 열고 닫아져요,, 이것도 따봉 버튼 수가 올라가는 것과 같이 변수가 하나라서 그런 것인가요?

{
 글제목.map(function(a,i){
return(
<div className="list">
<h4 onClick={() => {
setModal(!modal);
}} >{글제목[i]}</h4>
<p>7월10일 발행</p>
{modal === true ? <Modal /> : null}
</div>
 ) }) }

[codingapple]

넴 모달창이 3개 있는데 전부 modal 이라는 변수가 true일 때만 보여달라고 코드짜서 그럴 뿐입니다

[정민]

감사합니다.

강의 안에서 선생님 께서는 별 다른 코드 작업을 하지 않으신 것 같은데 
따로 코드를 작성 하셔서 하나의 h4태그를 눌렀을때 하나의 모달만 열리는 건가요?

[codingapple]

강의에선 모달창 3개말고 1개만 만들어놨습니다

[정민]

선생님,, 저도 모달창 하나만 (false)로 해놓고 코드를 짜도 
계속 3개 의 h4태그에서 모달창이 나옵니다,, 제가 뭘 잘못 한걸까요,,?

function App() {
let post = "주변 맛집";
let [글제목, 글수정] = useState(["데이트코스 추천", "대전맛집", "논산핫플"]);
let [like, likeC] = useState([0,0,0]);
let [modal, setModal] = useState(false);
 

return (
<div className="App">
<div className="black-header">
<h4>잡다한 블로그</h4>
</div>

{
 글제목.map(function(a, i){
return(
<div className="list" key={i}>
<h4 onClick={()=>{setModal(!modal)}}>
{글제목[i]}
<span onClick={() => {let copy = [...like];
 copy[i] = copy[i]+1;
likeC(copy) }}>👍</span>{like[i]}</h4>
<p>7월12일 발행</p>

{modal === true ? <Modal 글수정={글수정} 글제목={글제목}/> : null}

</div>
 )
})
}

 
</div>
 );
}

[codingapple]

{modal === true ? <Modal 글수정={글수정} 글제목={글제목}/> : null}
이걸 map 반복문 밖으로 뺍시다

[글쓴이]

글