본문 바로가기
개인공부/코딩애플

[React1]글제목변경되는 방법

by 뭉지야 2023. 6. 11.
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