[React] Map

앞서 component를 이용하여 많은 div를 함수로 합치는 방법을 알아보았다.

이번엔 JS의 MAP 함수를 이용하여 반복문으로 줄여주자.

 

 

A. map() 사용

1. 모든 Array 자료 뒤에 .map() 을 붙여준다.
2. () 내에 콜백함수를 넣어준다.

 

기능

1. array 자료 갯수만큼 함수 안의 코드를 실행해준다.
2. 함수의 파라미터는 array 안에 있던 자료
3. return 에 적으면 array로 담아줌

map 함수를 잘 익히면 React에서 쉽게 반복문 사용가능 !!! 

 

 

구현

• 마찬가지로 {} 안에서 for문 불가
• map() 함수 바로 사용해주기
• return 내에 html 작성
  • 코드가 길어진다면 소괄호로 묶어주기
• 함수 두 번째 인자의 경우
  • +1 씩 되는 파라미터
  • 인덱스로 접근시 [i] 로 사용해줄 수 있다.

{
        postName.map((postInfo)=>{
          return (
            <div className="postList">
              <h4 onClick={()=> { setPostModal(!postModal) }}>{ postInfo }  <span onClick={() =>{ changeLike(likeCount+1) }}>👍</span> { likeCount }</h4>
              <p>01 24 테스트</p>
            </div>
          )
        })
      }

 

 

B. 일반 for문을 사용하고 싶다면

 

1. html들을 담아둘 array 자료를 하나 만들기
2. 일반 for 반복문을 이용해서 반복문 돌림
3. 반복될 때마다 array 자료에 div 태그 추가
4. 원하는 곳에 {array 자료} 사용

function App (){
  
  var 어레이 = [];
  for (var i = 0; i < 3; i++) {
    어레이.push(<div>안녕</div>)
  }
  return (
    <div>
      { 어레이 }
    </div>
  )
}

 

 

C. 좋아요 개수 -> 개별 적용

• 위와 같이 map 함수를 사용한 경우, Modal 창과 좋아요 개수가 모든 게시물에 공통으로 작용한다.
• 이걸 따로따로 해주자.
• why 공통?
  • 좋아요 갯수를 기록할 state가 하나라서 그럼
  • 따라서, state의 수를 늘려주자.

 

{
        postName.map((postInfo, i)=>{
          return (
            <div className="postList">
              <h4 onClick={()=> { setPostModal(!postModal) }}>
                { postInfo }  
                <span onClick={() =>{ 
                  let copy = [...likeCount]
                  copy[i] = copy[i] + 1
                  setLikeCount( copy ) }}>👍</span> { likeCount[i] }</h4>
              <p>01 24 테스트</p>
            </div>
          )
        })
      }

 

-> modal 도 개별로 해주기