/*eslint-disable*/
import logo from './logo.svg';
import './App.css';
import { useState } from "react";
function App() {
let [글제목, b] = useState(['남자 코트 추천', '대전 우동 맛집', '노트북 스티커 추천']);
let [likes, setLike] = useState([0, 0, 0]);
let [modal, setModal] = useState(false);
return (
<div className="App">
<div className='black-nav'>
<h4>ReactBlog</h4>
</div>
{
글제목.map(function (a, i) {
return (
<div className="list">
<h4 onClick={() => {
setModal(!modal);
}}>{글제목[i]}<span onClick={() => {
let copy = [...likes];
copy[i] += 1;
setLike(copy);
}}>👍</span>{likes[i]}</h4>
<p>11월 21일 발행</p>
</div>)
})
}
{
modal == true ? <Modal a={[...글제목]} b={b} 글제목={글제목} /> : null
}
</div>
)
}
// -------------------------
function Modal(props) {
return (
<div className="modal">
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
<button onClick={() => {
let copy = [...props.a];
copy[0] = '여자 코트 추천';
props.b(copy);
}}>글수정</button>
</div >
)
}
export default App;
코드는 위와 같습니다. modal == true ? <Modal a={[...글제목]} b={b} 글제목={글제목} /> : null
모달에 저렇게 일일이 필요한 거 적었는데 혹시 더 깔끔하거나 직관적인 코드로 작성 가능할까요??
