map() / 블로그 글 개수만큼 html 생성 + 좋아요 개별 버튼 기능

 

map() / 블로그 글 개수만큼 html 생성하기 

 

 

 

 

map( )

: array 자료 개수만큼 함수 안의 코드를 실행해주는 함수  

 

• JSX 안에서 for문, if문 사용 ❌ 👉 map( ) 사용 ⭕
• map( ) 함수를 쓰면 그 자리에 array[ ]가 남음
• 콜백 함수를 사용해야 함

[ ].map (function( ) {
   return (
     반복할 코드
   )
});

 

 

• 함수 파라미터 1 == array안에 있는 자료
  파라미터 2 == 인덱스(index)

[4, 5, 6].map(function(a, i) {
   console.log(a) 
   // 4 5 6
   console.log(i)
   // 0 1 2
})

 

 

• return 값을 작성하면 array 자료 개수만큼 array로 반환해줌

[1, 2, 3].map(function(a) {
   return'112233' 
   // 112233 112233 112233
})

 

 

 

---

 

 

블로그 글 개수만큼 html 생성하기 

+ 좋아요 버튼 개별 생성하기

• React는 array[ ] 안에 html을 넣어도 잘 실행됨

구현 계획

1. 원본 복사
   let likeCopy = [...like];
2. index에 해당하는 글의 좋아요 증가++
   likeCopy[i]++;
3. 증가된 값으로 state 변경
   setLike(likeCopy);
4. 증가된 값으로 좋아요 숫자 변경
   {like[i]}

+ e.stopPropagation()으로 이벤트 버블링 막기 👉 좋아요 버튼을 누르면 상세 페이지가 열리는 오류 해결

let [like, setLike] = useState(['0', '0', '0']); // 좋아요 count

{
  제목.map(function(a, i){
    return ( 
      <div className='list' key={i}>
      <h4 onClick={()=> { setModal(!modal) }}> {a} 
        <span 
          onClick={(e)=> { 
            e.stopPropagation(); // 이벤트 버블링 막기
            let likeCopy = [...like]; // 원본 복사
            likeCopy[i]++; // index에 해당하는 글의 좋아요 count 증가++
            setLike(likeCopy); // 증가된 값으로 state 값 변경
          }}>
          👍
        </span> {like[i]} // 증가된 값으로 좋아요 count 변경 
      </h4>
      <p>2월 17일 발생</p>
    </div>
    )
  })
}

 

 

 

---

 

 

출처

코딩애플