[REACT] 이벤트 리스너

이벤트 다루는 법

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

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

 

함수를 변경하고 싶을때 state의 변경함수를 이용해서 재렌더링이 잘 일어난다.

/* eslint-disable */
//터미널에 뜨는 warning 안보이게 할때

import React, { useState } from 'react'; //react에 있는 내장함수 하나를 쓰겠습니다.
import logo from './logo.svg';

import './App.css';


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

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3> {글제목[0]} <span onClick={()=>{따봉변경(따봉 + 1)}}>👍</span> {따봉} </h3>
        {/*state 변경함수로 변경해야 재렌더링이 잘 일어난다. */}
        <p> 2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[1]} </h3>
        <p> 2월 18일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[2]} </h3>
        <p> 2월 19일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;