react 1일차

리엑트로 게시판을 만들고싶어서 유투브를 보면서 공부를 시작했다

오늘한거

1.리엑트 파일을 만들었다

2.jsx를 사용해봤다

3.usestate를 사용해서 array를 넣었다

4.state변경방법을 알았다.

App.js

/* eslint-disable */

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [글제목, 글제목변경] =useState(['남자 코트 추천','강남 우동 맛집','파이썬 맛집']);
  let [따봉, 따봉변경]=useState(0)
  let posts='강남 고기맛집';

  function 제목바꾸기(){
    var newArray=[...글제목];
    newArray[0]='여자코트 추천';
    글제목변경(newArray);
  }

  return (
    <div className="App">
        <div className="black-nav">
          <div>개발 Blog</div>
        </div>
        <button onClick={제목바꾸기}>버튼</button> 
        <div className="list">
          <h3>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h3>
          <p>2월 17일 발행</p>
          <hr/>
        </div>
        <div className="list">
          <h3>{글제목[1]}</h3>
          <p>2월 17일 발행</p>
          <hr/>
        </div>
        <div className="list">
          <h3>{글제목[2]}</h3>
          <p>2월 17일 발행</p>
          <hr/>
        </div>
        <Modal/>
      </div>
  );
}
function Modal(){
  return (
    <div className="model">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
  
}

export default App;

App.css

.App {
  text-align: center;
}

body{
  font-family: 
  'nanumsquare';
}
.model{
  margin-top: 20px;
  padding:20px;
  background: #eee;
}

.black-nav{
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}
.list{
  margin-top: 30px;
  text-align: left;
  padding-left:20px;
  padding-right: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}