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

function App() {

  let post = 'GANGNAM';
  let [a,b] = useState('YES');
  let [c,d] = useState('NO');
  let [e,f] = useState('OR');

  return (
    <div className="App">
      <div className="black-nav">
        <h4>BLOG</h4>
      </div>
      <div className="list">
        <h4>{a}</h4>
        <p>2022년 06월 09일</p>
      </div>
      <div className="list">
        <h4>{c}</h4>
        <p>2022년 06월 09일</p>
      </div>
      <div className="list">
        <h4>{e}</h4>
        <p>2022년 06월 09일</p>
      </div>
    </div>
  );
}


export default App;

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

function App() {

  let post = 'GANGNAM';
  let [글제목,b] = useState(['YES','NO','OR']);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>BLOG</h4>
      </div>
      <div className="list">
        <h4>{글제목[0]}</h4>
        <p>2022년 06월 09일</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2022년 06월 09일</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2022년 06월 09일</p>
      </div>
    </div>
  );
}

export default App;

터미널 / 브라우저 콘솔창에 warning이 뜨는 이유

/*eslint-disable*/

이라는 주석을 js 파일 최상단에 추가해주면 eslint 기능을 잠시 끌 수 있습니다.

좋아요 버튼 만들기

<h4> { 글제목[0] } <span>👍</span> 0 </h4>

2-1. html

<div onclick="실행할 자바스크립트~~~">

2-2. JSX

Click이 대문자인거

{} 중괄호 사용하는거

그냥 코드가 아니라 함수를 넣어야 잘 동작한다는거

<div onClick={실행할함수}>

클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용합니다.

state를 변경하시려면 state 변경함수를 꼭 이용하십시오.

state변경함수는 ( ) 안에 입력한걸로 기존 state를 갈아치워줍니다.

/*eslint-disable*/

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

function App() {

  let post = 'GANGNAM';
  let [글제목,b] = useState(['YES','NO','OR']);
  let [따봉,따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>BLOG</h4>
      </div>
      <div className="list">
        <h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span> {따봉} </h4>
        <p>2022년 06월 09일</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2022년 06월 09일</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2022년 06월 09일</p>
      </div>
    </div>
  );
}

export default App;

참조: 코딩애플 리액트 강의

https://codingapple.com/

react로 블로그3, 2022-06-09