[React] 좋아요 버튼 기능 생성하기 (onCilck 버튼 누르면 +1 증가,개별증가)

YS_Study.log·2022년 3월 30일

useState문법

상태변수는 초기값을 갖고 있다.
해당 state변수의 값은 상태변경함수()만 사용해서 해당 값을 변경할 수 있다.

let [상태변수, 상태변경함수] = useState( 초기 값)

useState로 좋아요 기본 state 변수 값 셋팅

like 상태 변수 초기값 : 0
버튼을 누를 때 1씩 증가해야함으로 숫자 0으로 설정하는 것이다.
setLike 상태변경함수 설정
버튼을 누를 때 1씩 증가해 줄 함수, 상태변경!


 let [like, setLike] = useState(0);

  // 블로그 이름 목록 초기 셋팅
  let [blogName, setBlogName] = useState([
    "코딩학원 추천","온라인 코딩 강의 추천","개발 블로그 추천",
  ]);

좋아요 누를 경우 숫자 올라가는 기능

onClick 이벤트 사용 : 👍 누를 경우 {()=>{코드실행}} 중괄호 내의 함수가 실행된다.
setLike(like + 1); 상태변경함수 사용: 상태변경함수() 소괄호 내에 like 기존의 상태변수 기본값 0에 +1을 더해주는 식을 담아준다.
버튼을 눌러 onClick={() => { setLike(like + 1); }} > 상태 변경 함수가 실행될때마다 +1씩 증가된다.

<div className="list">
            <h3> {blogName} 
              <span onClick={() => { setLike(like + 1); }} > 👍 </span> {like} </h3>
            <p>3월 02일 발행</p>
            <hr />
          </div>

1번째 글의, 좋아요 버튼 5번 누른다면? 모든 글의 좋아요 수가 5로 바뀐다!

개별로 좋아요 개수 증가시키려면?

=> 이 방법의 단점, 데이터가 증가할때마다 [0,0,0,0] 0을 계속 추가해줘야한다!
후에 데이터가 입력될때마다 알아서 되게끔 해보자

좋아요 수를 올리는 상태변수 like 초기값 : [0,0,0]
- 배열을 이용하여 블로그 네임 데이터 개수만큼 초기값을 맞춰준다.

 let [like, setLike] = useState([0, 0, 0]);

map의 특성을 활용하여, 버튼을 눌렀을때 즉 onclick했을 때 like의 개수가 1씩 증가하도록 한다.

map 1 번째 인자 el : 각 요소 한개, 제목 한개(순서대로)
map 2 번째 인자 i : 각 요소의 인덱스, 위치를 나타낸다.
변수 하나 생성하여 like [0,0,0] 배열 값을 복사해서 갖고 온다.
- 깊은 복사! 스프레드 문법
likeCnt[i]++ : 버튼을 누르면 해당 글 번호에(인덱스) 해당되는 like좋아요 i번째 요소인, 0 에 +1을 더해준다.
setLike(likeCnt) : 상태변수함수를 사용해서 +1더해진 값으로 상태변수 like를 바쒀준다.
{like[i]} : 해당 글번호와 같은 좋아요 요소(1이 더해진)를 출력한다.

  {blogName.map((el, i) => {
        return (
          <div className="list" key={i}>
            <h3>
              {el}
              <span
                onClick={() => {
                  let likeCnt = [...like];
                  likeCnt[i]++;
                  setLike(likeCnt);
                }}
              >
                👍
              </span>
              {like[i]}
            </h3>
            <p>3월 02일 발행</p>
            <hr />
          </div>
        );
      })}