[코딩애플님 강의] 4. 리액트, 이벤트 리스너

 

*따봉을 누를때마다 1이 증가하는 코드

/* eslint-disable */

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

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 스커트 추천', '남자 봄옷 추천']);
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="App">
        <div className="black-nav">
          <div>개발 Blog</div>
        </div>
        <button>버튼</button>
        <div className="list">
          <h3> { 글제목[0] } <span onClick={ ()=>{따봉변경( 따봉 + 1 )} }>👍</span>{따봉}</h3>
          <p>2월 17일 발행</p>
          <hr></hr>
        </div>
        <div className="list">
          <h3> { 글제목[1] } </h3>
          <p>3월 17일 발행</p>
          <hr></hr>
        </div>
        <div className="list">
          <h3> { 글제목[2] } </h3>
          <p>2월 17일 발행</p>
          <hr></hr>
        </div>
      </div>
    </div>
  );
}

export default App;

/* eslint-disable */

=> 터미널에 뜨는 warning 문법 체크사항을 나타나지 않게 해줌

 

onClick={클릭될 때 실행할 함수}

onClick={ ()=>{실행할 내용} }