[React] 4강 | 버튼에 지리는 기능만들기

eslint warning

---

• /* eslint warning */ : Lint 끄는 기능

좋아요❤️ 버튼만들기

---

• 좋아요 표시 숫자는 자주 바뀌니 state로 구현
• App.jsx

    let [하트] = useState(0);
  
    return (
        <div className="App">
        <div className="black-nav">
          <h4 style=>MyBlog</h4>
        </div>
        <div className="list">
          <h4>{글제목[0]}<span> ❤️</span> {하트} </h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[1]}</h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>2월 18일 발행</p>
        </div>
        </div>
    )
  

onClick 쓰는 법

---

• event handler
• onClick={} 안에는 함수 이름을 넣어야 함(함수 만드는 문법 바로 넣어도 상관없음 () => {} 등)
  • ex) <h4>{글제목[0]}<span onClick={() => {console.log(1)} }> ❤️</span> {하트} </h4>

state 변경하는 법

---

• state 변경용 함수를 써야 html 재렌더링도 잘됨 (문자도 가능)
• App.jsx

    let [하트, 하트변경] = useState(0);
  
    function 함수(){
        
    }
    return (
        <div className="App">
        <div className="black-nav">
          <h4 style=>MyBlog</h4>
        </div>
        <div className="list">
          <h4>{글제목[0]}<span onClick={ ()=> { 하트변경(하트+1) }}> ❤️</span> {하트} </h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[1]}</h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>2월 18일 발행</p>
        </div>
        </div>
    )
  

버튼 눌렀을 때 제목 변경(숙제)

---

• App.jsx

    let [제목, 제목변경] = useState('3월 전시 목록');
  
    function 함수(){
        
    }
    return (
        <div className="App">
        <div className="black-nav">
          <h4 style=>MyBlog</h4>
        </div>
        <div className="list">
          <h4>{글제목[0]}<span onClick={ ()=> { 하트변경(1) }}> ❤️</span> {하트} </h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4><span onClick={ ()=> { 제목변경('4월 전시 목록') } }> ✒️</span> {제목}</h4>
          <p>2월 18일 발행</p>
        </div>
        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>2월 18일 발행</p>
        </div>
        </div>
    )