React로 간단한 홈페이지 만들기2(state, onClick)

참고

terminal 창에서 warning message 삭제하는 법

• /*eslint-disable*/

 

오늘 할 것 :

좋아요버튼과 좋아요 개수 UI 만들기

 

 

좋아요 버튼 만들기

---

onClick Eventhandler

• 클릭했을 때 {} 안의 함수가 실행됨
• 사용법
  • onClick={funcName} 후 funciotn 정의
  • onClick={function() {console.log(1)}}
  • onClick={() => {console.log(1)}}
  • {} 안에는 함수가 들어가야 함

 

좋아요 개수 UI 만들기

---

State 변경

• state는 등호로 변경 금지(html에 반영 안됨)
• useState()에서 변수 선언할 때 두번째 파라미터를 이용해 수정해야 함
• ex) let [like, likeController ] = useState(0)
• 변경하는 방법
  • state변경함수(변경할state)
  • state가 문자일때에도 똑같음

 

객체가 들어있는 State 변경

• 방법 1 
  • 위와 같이 수정해도 되지만, 글의 개수가 많아질 경우 확장성이 없음
• <button onClick={() => { 글제목변경(['여자 코트 추천', '강남 우동맛집','파이썬독학']) }}>글 수정</button>

 

• 방법2

        <button onClick={() => {
            글제목[0] = '여자 코트 추천'
            글제목변경(글제목)
        }}>글 수정</button>

  • 위와 같이 작성해도 되지만, array/object 다룰 때 원본은 보존하는게 좋음
  • 위와 같은 방법은 원본이 영구적으로 변경 됨

 

• 방법3
  • 복사본을 만들어서 사용

      <button onClick={() => {
        let copy = 글제목
        copy[0] = '여자 코트 추천'
        글제목변경(copy)
      }}>글 수정</button>

 

하지만 이렇게 해도 수정이 안된다!

 

 

객체가 들어있는 State 변경 시 주의사항

• state 변경 함수 특징
  • 기존 state == 신규 state`의 경우 변경되지 않음
  • 위의 경우 글제목 == copy로 보기 때문에 변경되지 않음
• array/object 특징
  • let arr = [1,2,3]이라고 할 때, arr은 [1,2,3]이 아닌, [1,2,3]을 가르키는 화살표(주소)임
  • 그러므로 글제목[0] = '여자코트추천'으로 수정해도 글제목 array만 수정되지 변수에 있던 화살표는 수정되지 않음
    => 그래서 state가 변경되지 않았다고 인식(화살표가 같으니까) => 수정되지 않음

 

객체가 들어있는 State 변경하는 법(최종)

    <button onClick={() => {
    let copy = [...글제목]
    copy[0] = '여자 코트 추천'
    글제목변경(copy)
    }}>글 수정</button>

• [...글제목]
  • ... : unpacking
  • [] : 괄호 다시 씌우기
• 이 과정을 통해 완전히 독립적인 사본 생성(화살표도 바뀜)
  => 새로운 state구나! => 변경!
• shallow copy / deep copy 를 사용하는 방법임

 

정리

• state가 array/object인 경우 독립적 카피본을 만들어서 수정해야 한다

 

코드

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


function App() {

  let [글제목,글제목변경] = useState(['남자 코트 추천', '강남 우동맛집','파이썬독학']);

  let [like, likeController ] = useState(0)



  return (
    <div className="App">
      <div>
        <div className="black-nav">
          <h4 style={{fontSize : '20px'}}>ReactBlog</h4>
        </div>

        <button onClick={() => {
          let copy = [...글제목]
          copy = copy.sort()
          글제목변경(copy)
        }}>오름차순 정렬</button>

        <button onClick={() => {
          let copy = [...글제목]
          copy[0] = '여자 코트 추천'
          글제목변경(copy)
        }}>글 수정</button>

        <div className="list">
          <h4>{글제목[0]} <span onClick={() => {likeController(like+1)}}>👍</span>{like}</h4>
          <p>12월 17일 발행</p>
        </div>

        <div className="list">
          <h4>{글제목[1]}</h4>
          <p>12월 17일 발행</p>
        </div>

        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>12월 17일 발행</p>
        </div>

      </div>
    </div>
  );
}

export default App;

• 숙제로 오름차순 정렬도 구현함!
  • 현재로써는 글 자체가 바뀌는 것이 아닌 제목만 바뀐다는 한계가 있음 => 공부가 더 필요하다!

 

css

div {
  box-sizing: border-box;
}

.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}

 

 

 

결과

1. 기본 페이지 (좋아요 버튼 및 기능 구현)

 

2. 글수정 버튼 클릭 시 남자-> 여자로 변경

 

3. 오름차순 정렬