import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
let post = '강남 우동 맛집';
let [글제목, 이름변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
let [따봉, 따봉변경] = useState([0,0,0]);//두번째 변수는 변경함수
let [modal, setModal] = useState(false);
console.log(따봉[1])
return (
<div className="App">
<div className='black-nav'>
<h4 style={{ color: 'white', fontSize: '16px' }}>블로그임</h4>
</div>
<button onClick={() => {
let sortcopy = [...글제목];
sortcopy.sort();
이름변경(sortcopy)
}}>가나다순 정렬</button>
<button onClick={() => {
let copy = [...글제목];//어레이 오브젝트 원래 데이터 보존이 좋음,
copy[0] = '여자 코트 추천';
이름변경(copy);
}}>🔁</button>
{/* <div className="list">
<h4>{글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1) }}>👍</span> {따봉}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4>{글제목[1]}</h4>
<p>2월 17일 발행</p>
</div>
<div className="list">
<h4 onClick={() => { setModal(!modal) }}>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div> */}
{
글제목.map(function (a,i) {
return (
<div className="list">
<h4 onClick={() => { setModal(!modal) }}>{a}
<span onClick={() => {
let copy따봉 = [...따봉]
copy따봉[i] += 1;
따봉변경(copy따봉)
}}>👍</span>{따봉[i]}</h4>
<p>2월 17일 발행</p>
</div>
)
})
}
{
modal == true ? <Modal /> : null
}
</div>
);
}
function Modal() {
{
[1,2,3].map(function(){
return (
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
})
}}
export default App;
이러한 코드처럼 맨 아래 Modal컴포넌트 안에 map 을 사용하여 반복문을 만들고 그 컴포넌트를 메인 컴포넌트에
집어 넣으려고 하는데 Modal컴포넌트 안에 map을 사용 안하면 잘 작동하는데 map을 하자마자 아무런 반응이 없습니다 이유가 있을까요
