컴포넌트를 반복적으로 렌더링해보자

오늘은 map() 이라는 JS 내장 함수를 이용하여 반복되는 컴포넌트를 렌더링하는 방법에 대해 공부해보자

🗺️ map() 지도아님

map()함수를 알아보기 전 간단하게 문법과 예제를 알아보고 가자

arr.map(callbak, [thisArg])

• callback에 해당하는 새로운 배열을 만들기 위한 파라미터는 3가지가 있다.
  • currentValue - 현재 처리하고 있는 요소
  • index - 현재 처리하고 있는 요소의 index 값
  • array - 현재 처리하고 있는 원본 배열
• thisArg - callback 함수 내부에서 사용할 this 레퍼런스

항상 느끼는건데 기본이 제일 어려운 법인 것 같다

그래서 예제를 통해 조금 더 알아보자

map() 함수의 예제

let arr = [1, 2, 3, 4, 5];

let multipled = arr.map((num) => {
  return num * 2;
});

console.log(multipled); // [2, 4, 6, 8, 10]

위의 코드는 파라미터를 뒤에 2개를 생략했기에 currentValue만으로 새로운 배열을 만들고 있다.
이를 통해서 알 수 있는 것 currentValue - > 1, 2, 3, 4, 5

• index(idx) - 0, 1, 2, 3, 4
• array - [1, 2, 3, 4, 5]

🔥 그럼 이제 렌더링을 하러 가보자

기본이 가장 중요하기에 위의 코드를 바꿔서 코드를 작성해보자

1. 데이터 배열을 생성해보자

• 하위 컴포넌트

const ChildrenComponent = () => {
  const weathers = ['봄', '여름', '가을', '겨울', '핵겨울'];

  return (
    <div className="ChildrenComponent">
      <div>
        {weathers.map((weather) => (
          <div>{weather}</div>
        ))}
      </div>
    </div>
  );
};
export default ChildrenComponent;

위의 코드는 한가지 문제점이 있다. 무엇일까?
-> Missing "key" prop for element in iterator
반복 되는 컴포넌트에 고유한 key 속성을 추가해줘야 한다는 말이다.

그럼 추가해보자

const ChildrenComponent = () => {
  const weathers = ['봄', '여름', '가을', '겨울', '핵겨울'];

  return (
    <div className="ChildrenComponent">
      <div>
        {weathers.map((weather,idx) => (
          <div key={idx}>{weather}</div>
        ))}
      </div>
    </div>
  );
};
export default ChildrenComponent;

여기서도 느낄 수 있는 건 기본이 중요하다. 현재 배열은 딱히 키라고 부를 수 있는 것이 없다.
그렇기에 map함수의 idx 값을 고유의 키 값으로 전달해 주니 문제가 해결 된 것을 볼 수 있다.

2. 화면에 렌더링 하기

• 상위 컴포넌트

import ChildrenComponent from './ChildrenComponent';

const ParentComponent = () => {
  return (
    <div className="ParentComponent">
      <ChildrenComponent />
    </div>
  );
};

사실 이거는 정말 간단한 예제였고 이를 통해 데이터를 추가, 제거를 할 수 있는 응용력을 길러보자

🔥 데이터를 전달 받고 전달 받은 데이터를 렌더링 해보자

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주고
전달 받은 데이터를 통해 화면에 렌더링 하는것에 대해 알아보자

1. 객체를 포함한 배열을 dummyList로 생성 + 하위 컴포넌트로 prop을 해준다.

• 상위 컴포넌트

import BottomComponent from './BottomComponent';

const TopComponent = () => {
  const dummyList = [
    { id: 1, 이름: '김동현', 나이: 22, 생월: 8 },
    { id: 2, 이름: '박동현', 나이: 21, 생월: 8 },
    { id: 3, 이름: '최동현', 나이: 29, 생월: 8 },
    { id: 4, 이름: '강동현', 나이: 27, 생월: 8 },
  ];
  return (
    <div className="TopComponent">
      <BottomComponent dummyList={dummyList} />
    </div>
  );
};

export default TopComponent;

2. prop한 데이터를 받아 map() 함수를 통해 렌더링을 한다.

• 하위 컴포넌트

const BottomComponent = ({ dummyList }) => {
  return (
    <div>
      {dummyList.map((it) => (
        <div key={it.id}>
          <p>안녕하세요 {it.이름} 입니다.</p>
          <p>나이는 {it.나이}입니다.</p>
          <p>태어난 달은 {it.생월}입니다.</p>
        </div>
      ))}
    </div>
  );
};

export default BottomComponent;

잘 렌더링 되는 것을 볼 수 있다.

다음 장에서는 데이터를 추가 또는 제거를 할 수 있는 방법에 대해 알아보자