import logo from './logo.svg';
import './App.css'; //css파일 이용할때 쓰기
import { useState } from 'react';
function App() {
let [글제목, 글제목변경] = useState(['남자져지 추천', '부산 국밥 맛집', '리액트독학']); //왜 state쓰노? 차이점은 변수는 갑자기 변경되면 자동으로 안된다. state는 자동으로 바꿔준다
let [따봉, 따봉변경]= useState([0,0,0]); //따봉변경은 state변경 함수
let [title,setTitle] = useState(0);
let [modal,setModal] = useState(false);
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(true)}}>{ 글제목[i] } <span onClick={ (e) =>{
e.stopPropagation(); //따봉 눌러도 모달창 안뜨게 해주는 함수
let copy = [...따봉];
copy[i] += 1;
따봉변경(copy) }}>👍</span> {따봉[i]}</h4>
<p>2월 17일 발행</p>
</div>
)
})
}
<input onChange={ (e)=>{
입력값변경(e.target.value);
} } />
<button onClick={ () => {
let copy = [...글제목];
copy.unshift(입력값);
글제목변경(copy);
}}>추가</button>
{
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;
이대로 하면 따봉갯수가 추가된 글의 갯수를 못따라가서 따봉이 3개밖에 안나오게 되요 어케요
