[React] 리액트 좋아요 개별 클릭수 카운트하기 - 배열 copy 이용

※ 요약정리

1) 좋아요 useState 배열로 만들어주고 → let [좋아요, 좋아요변경] = [0,0,0]

2) onClick 에서 ( )⇒{

     ① 좋아요배열복사해서 → let copy = [...좋아요];

     ② 카피된 배열에 카운트를 더하고 → copy[i] = copy[i]+1;

     ③ 다시 좋아요변경 함수를 이용해 좋아요 배열에 넣어준다. → 좋아요변경(copy); }

3) 카운트 할 곳에 {좋아요[i]} 넣어주면 끝

 

---

 

1. 먼저 state를 사용하기 위해 제일 상단에 {useState} 있나 확인

import React, **{ useState }** from 'react';

 

2. function App 안에 각각의 좋아요를 카운트할 useState 배열 생성

• 여기서 좋아요 배열의 갯수는 글제목의 배열 갯수와 똑같이 해야함

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);
**let [좋아요, 좋아요변경] = [0,0,0];**
 return(
 
    )})}

    </div>  
 )  
}

 

 

 

3. 기본 좋아요와 카운트의 위치를 html안에 설정

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);

 return(
   <div>
   {글제목.map(()=>{return(
     <div className='list'>
       <div>글제목**<span>👍</span> 0** </div>
       <p>3월 28일</p> 
      </div>
    )})}
    </div>  
 )  
}

 

4. 좋아요를 눌렀을 때의 카운트 기능을 onClick을 이용해서 설정

• onClick 안에서 좋아요 배열을 복사해서 let copy = [...좋아요];
• 카피된 배열에 카운트를 더하고 copy[i] = copy[i]+1;
• 다시 좋아요변경 함수를 이용해 좋아요 배열에 넣어준다. 좋아요변경(copy);
• 글제목.map 안에 있는 거라서 i 를 그냥 사용 가능

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);

 return(
   <div>
   {글제목.map(()=>{return(
     <div className='list'>
       <div>글제목<span onClick={()=>{ 
				**let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);**	
				}}>👍</span> 0 </div>
       <p>3월 28일</p> 
      </div>
    )})}
    </div>  
 )  
}

 

반응형

 

 

 

5. 마지막 카운트 되는 곳에 0 대신 저장된 배열을 보여준다.

function App() {
let [글제목, 글제목변경] = useState(['떡볶이맛집','짜장면맛집','케이크맛집']);

 return(
   <div>
   {글제목.map(()=>{return(
     <div className='list'>
       <div>글제목<span onClick={()=>{ 
		****		let copy = [...좋아요];
				copy[i]+=1;
				좋아요변경(copy);	
				}}>👍</span> **{좋아요[i]}**</div>
       <p>3월 28일</p> 
      </div>
    )})}
    </div>  
 )  
}

 

6. 결과