[React] map()을 통한 반복적인 태그 줄이기

리액트를 접하기 시작하면 반복적으로 하드 코딩되는 부분이 발생한다

 

예를 들어

function App() {
  return (
    <div className="App">

      <div className="product">
        <h4>Safari belted half shirt</h4>
        <div>6월17일 예약 발송</div>
      </div>
      <div className="product">
        <h4>Flap pocket open collar shirt</h4>
        <div>6월17일 예약 발송</div>
      </div>
      <div className="product">
        <h4>Aircrew half shirt</h4>
        <div>6월17일 예약 발송</div>
      </div>
      <div className="product">
        <h4>Multi stripe pique tee</h4>
        <div>6월17일 예약 발송</div>
      </div>
      
    </div>
  );
}

이렇게 상품이 여러개가 존재하고 상품 한 개마다 비슷한 구조의 태그들을 가지고 있다면

State를 통해 배열안에 담거나 data로 만들어 코드를 줄이면서 효율적으로 관리할 수 있다

const [productData, setProductData] = useState([
    'Safari belted half shirt',
    'Flap pocket open collar shirt',
    'Aircrew half shirt',
    'Multi stripe pique tee'
  ]);
  return(
    // 생략
  )

useState를 사용하기전 import 해오는 것을 잊지 말자

이제 useState안 배열의 요소를 가지고 하드 코딩한 상품의 제목을 바꿔 볼 수 있다

 

return (
    <div className="App">

      <div className="product">
        <h4>{productData[0]}</h4>
        <div>6월17일 예약 발송</div>
      </div>
      <div className="product">
        <h4>{productData[1]}</h4>
        <div>6월17일 예약 발송</div>
      </div>
      <div className="product">
        <h4>{productData[2]}</h4>
        <div>6월17일 예약 발송</div>
      </div>
      <div className="product">
        <h4>{productData[3]}</h4>
        <div>6월17일 예약 발송</div>
      </div>

    </div>
  );

같은 결과를 출력 하지만 결국 하드 코딩한 태그 안에서 제목 대신 state를 넣어 줬을 뿐 코드량이 줄거나

코드가 길어 가독성이 전혀 변하지는 않는다

 

여기서 map()이라는 배열의 요소만큼 반복을 해주는 일종의 반복문을 사용하여 하드 코딩한

코드를 간결하고 가독성 좋게 바꾸어 줄 수 있다

 

map()의 문법

array.map(function () {
          return (
            // 반복될 코드
          )
        })

map() arrow function (화살표 함수)

array.map(() => {
          return (
            // 반복될 코드
          )
        })

주의할 점은 map()함수도 파라미터 안에 콜백 함수를 받는 형태이기에 많은 사람들이 return을 빼먹는 경우가

종종 있는데 return을 써주지 않으면 html태그를 인식하지 않기 때문에 에러를 뱉는다

return은 꼭 써주도록 하자

 

사용예시

productData.map(() => {
          return (
            <div className="product">
              <h4>{productData[0]}</h4>
              <div>6월17일 예약 발송</div>
            </div>
          )
        })

productData안에 있는 배열의 요소가 4개이기 때문에 map()이 네 번을 돌아 인덱스[0] 해당하는

제목이 4번 잘 찍힌걸 확인할 수 있다

그러면 4번 찍힌 인덱스[0]가 아니라 배열의 요소를 순서대로 보여줘야 제목이 각각 다르게 나올 거 같다

productData.map((elm, index) => {
          return (
            <div className="product">
              <h4>{productData[index]}</h4>
              <div>6월17일 예약 발송</div>
            </div>
          )
        })

콜백 함수 안에는 두 개의 파라미터의 인자 값을 받을  수 있는데 첫 번째는 요소,

두 번째는 배열의 인덱스를 순서대로 받아 올 수 있다

그래서 우리는 인덱스가 순서대로 필요하기에 index를  [0] 대신 넣어주면 배열의 인덱스를 순서대로 받아와

찍어 주게 된다 ex( [0], [1], [2], [3] ) 

 

See the Pen React Hooks setState/useState Example by shinjihoon (@SJH8730) on CodePen.