728x90
import { useState } from "react";
import "./App.css";
function App() {
let [글제목, 글제목변경] = useState([
"남자 코트 추천",
"강남 우동 맛집",
"파이썬독학",
]);
let [따봉, 따봉변경] = useState(0);
return (
<div className="App">
<div className="black-nav">
<h4 style={{ color: "skyblue", fontSize: "25px", fontWeight: 500 }}>
ReactBlog
</h4>
</div>
<button
onClick={() => {
let simple = [...글제목];
simple.sort();
글제목변경(simple);
}}
>
가나다순정렬
</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>{글제목[2]}</h4>
<p>2월 17일 발행</p>
</div>
</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 |