728x90
let [따봉, 따봉변경] = useState(0);
let [따봉1, 따봉변경1] = useState(0);
let [따봉2, 따봉변경2] = useState(0);
이걸 정리해서 이렇게 만든다.
let [따봉, 따봉변경] = useState([0,0,0]);
{글제목[i]}
<span
onClick={() => {
// 따봉변경(따봉 + 1);
let copy = [...따봉];
copy[i] = copy[i] + 1;
따봉변경(copy);
}}
>
👍
</span>
{따봉[i]}
import { useState } from "react";
import "./App.css";
function App() {
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동 맛집",
"파이썬독학",
]);
let [따봉, 따봉변경] = useState([0, 0, 0]);
let [modal, setModal] = useState(false);
return (
<div className="App">
<div className="black-nav">
<h4 style={{ color: "skyblue", fontSize: "25px", fontWeight: 500 }}>
ReactBlog
</h4>
</div>
{글제목.map(function (a, i) {
return (
<div className="list" key={i}>
<h4
onClick={() => {
setModal(!modal);
}}
>
{글제목[i]}
<span
onClick={() => {
// 따봉변경(따봉 + 1);
let copy = [...따봉];
copy[i] = copy[i] + 1;
따봉변경(copy);
}}
>
👍
</span>
{따봉[i]}
</h4>
<p>2월 17일 발행</p>
</div>
);
})}
{modal === true ? <Modal /> : null}
</div>
);
}
function Modal() {
return (
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
);
}
export default App;
728x90
'개인공부 > 코딩애플' 카테고리의 다른 글
[React1] class이용하기 (0) | 2023.06.13 |
---|---|
[React1]글제목변경되는 방법 (1) | 2023.06.11 |
[React1] props 이용방법 (1) | 2023.06.11 |
[React1] map이용해서 반복 돌리기 (0) | 2023.06.11 |