React - map

똑같은 html이 반복적으로 출현하면

반복문을 이용해서 쉽게 똑같은 html을 생성할 수 도 있습니다. 

for반복문은 JSX중괄호 안에서 사용할 수 없어서 map()을 대신 사용합니다. 

 

 

map 함수 사용법

모든 array 자료 우측엔 map()함수를 붙일 수 있습니다. 

var array = [2,3,4];
array.map(function(){
  console.log(1)
});

위의 코드처럼 작성하면 array에 들어있는 자료갯수만큼

그 안에 있는 코드를 반복실행해줍니다. 

 

아래처럼 콜백함수에 파라미터 아무렇게나 작성해주면

그 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해줍니다.

즉 2, 3, 4 가 출력됩니다. 

var array = [2,3,4];
array.map(function(a){
  console.log(a)
});

 

 

return 오른쪽에 어떠한 값을 적으면 array로 담아줍니다.

그리고 map()쓴자리에 남겨줍니다. 

var array = [2,3,4];
var newArray = array.map(function(a){
  return a * 10
});
console.log(newArray)

직접 콘솔창에서 확인해봅시다. 

 

 

JSX안에서 HTML을 반복생성

리액트 중괄호안에서 HTML을 반복생성하고 싶으면 아까 배운 map을 사용합니다.

{ 
        [1,2,3].map(function(){
          return ( <div>안녕</div> )
        }) 
 }

이렇게 작성하면 <div>안녕</div>이 3개 생성됩니다. 

 

그래서 위의 기능을 활용하여 예전에 만들었던 글제목 3개도 반복문으로 축약할 수 있습니다.

{ 
        글제목1.map(function(){
          return (
          <div className="list">
            <h4>{ 글제목1[0] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }

이렇게하면 3개 생성됩니다. 

하지만 똑같은 자료가 3개반복되고 있습니다. 이를 해결하려면 

콜백함수안의 매개변수를 활용하면됩니다.

 

 { 
        글제목1.map(function(a){
          return (
          <div className="list">
            <h4>{ a }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }

그리고 이렇게 해도됩니다.

두번재 매개변수 i를 사용하면됩니다. 

첫째 파라미터 a는 array안에 있던 자료

둘째 파라미터 i는 0부터 1씩 증가하는 정수가 되어서 그렇습니다.

i출력해보면 0 1 2 이런 식으로 나옵니다. 

 { 
        글제목1.map(function(a, i){
          return (
          <div className="list">
            <h4>{ 글제목1[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
 }

 

전에 만들었던 좋아요 기능도 추가해보면 

{
        글제목1.map((a,i)=>{
          return(
            <div className="list" key={i}>
              <h4>{글제목1[i]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span> {따봉}</h4>
              <p>2월 17일 발행</p>
           </div>
          )
        })
 }

 

결과가 잘나옵니다. 그리고 추가적으로 map 반복문으로 반복생성한 html엔 key={i}이런 속성을 추가해야합니다. 

그래야 리엑트가 <div>들을 구분할 수 있어서 그렇습니다. ex)<div className="list" key={i}> 없으면 waring을 띄워줍니다.

 

하지만 하나의 문제가 있습니다.

좋아요 버튼을 클릭하면 좋아요 갯수가 다 똑같이 증가합니다. 

해결해보겠습니다.

 

아래와 같이  state에 값을 추가해주고 

해당 글제목이 클릭되면 해당 인덱스의 값이 +1 되도록 했습니다. (state가 array형식이기때문에)

 let [따봉,따봉변경]=useState([0,0,0]);
 ...
{
        글제목1.map((a,i)=>{
          return(
            <div className="list" key={i}>
              <h4>{글제목1[i]}<span onClick={()=>{
                let copy=[...따봉];
                copy[i]=copy[i]+1;
                따봉변경(copy);
              }}>👍</span> {따봉[i]}</h4>
              <p>2월 17일 발행</p>
           </div>
          )
        })
      }

'

 

---

참고자료

https://codingapple.com/course/react-basic/

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌