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);
let [title, setTitle] = useState(0);
let [입력값, 입력값변경] = useState('');
return (
<div className="App">
<div className="black-nav">
<h4>ReactBlog</h4>
</div>
{
글제목.map(function (a, i) {
return (
<div className="list" key={i}>
<h4 onClick={() => { setModal(!modal); setTitle(i) }}>{글제목[i]}<span onClick={() => {
let copy = [...따봉];
copy[i] = copy[i] + 1;
따봉변경(copy);
}}> 👍</span> {따봉[i]}</h4>
<p>7월 18일 발행
</p>
<button onClick={()=>{
let copy = [...글제목];
copy.splice(i, 1);
글제목변경(copy);
}}>삭제</button>
</div>
)
})
}
<div>
<input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
<button onClick={()=>{
let copy = [...글제목];
copy.unshift(입력값);
글제목변경(copy)
}}>글발행</button>
</div>
{
modal == true ? <Modal title={title} 글제목변경={글제목변경} 글제목={글제목}/> : null
}
</div>
)
}
function Modal(props) {
return (
<div className="modal">
<h4>{props.글제목[props.title]}</h4>
<p>날짜</p>
<p>상세내용</p>
<button>글수정</button>
</div>
)
}
export default App;
// let copy = [...글제목];
// copy.unshift(입력값);
// 글제목변경(copy)
코드는 위와 같고 선생님 따라서 하고있었는데, 글발행을 하면 맨위에 새 글이 추가되고 맨아래있던 글의 따봉은 NaN으로 바뀝니다.
왜이런걸까요.

두번째로 숙제로 했을때에는
<div>
<input onChange={(e) => { 입력값변경(e.target.value) }} />
<button onClick={() => {
let copy = [...글제목];
copy = [...글제목, 입력값];
글제목변경(copy);
let copy2 = [...따봉];
copy2 = [...따봉, 0];
따봉변경(copy2);
}}>글발행</button>
</div>
글발행으로 글을 추가하는 코드를 위와같이 짰는데, 코드가 괜찮은지 알고싶습니다. 비효율적인지? 선호하지않느 방법이라던지..?!
감사합니다.