4.(React) Blog만들기 - Button기능

ERROR 는 에러라 꼭 고쳐야하고
WARNING 은 경고 - 무시가능

/* eslint-disable */

// Lint를 꺼줌 , WARNNING메시지 안보이게

 

좋아요 버튼 & 갯수 UI 만들기

/* eslint-disable */ 

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

function App() {

  let [글제목,b] = useState(['여성 의류 추천','대구 분식집 추천','리액트 공부방법']);
  // a: state에 보관했던 자료
  // b: state 변경을 도와주는 함수

  let [like,setLike] = useState(0);
            // setLike - state변경함수
            // 여길 써야 자동으로 랜더링이 됨

  function 함수(){
    setLike(like+1)
  }

  return (
    <div className="App">
      <div className="black-nav">
        <h4>Blog Logo</h4>
      </div>
    <div className='list'>
                            {/* eventhandler 함수이름을 넣어야함 */}
      <h4>{글제목[0]} <span onClick={함수}>👍</span> {like} </h4>
                                  {/* 변경되는 값이라 state로 만들면 좋음 */}
      {/* 인덱싱으로 배열에서 꺼내욤 */}
      <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;

onClick={} 안엔 함수가 들어가야함
state변경 시 등호로 변경 금지

 

 

이벤트 핸들러