[NextJS] .map() 함수 사용 & Components Map 하는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

.map() 함수는 배열을 변환하거나 새로운 배열을 생성할 때 사용한다.

이 함수는 배열 내의 각 요소에 대해 지정된 함수를 호출하하게 되는데

배열의 각 요소를 하나씩 가져와서 그 요소를 변환한 후 새로운 배열로 만들어주는 역할을 한다.

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map((number) => number * 2);
// doubledNumbers = [2, 4, 6, 8, 10]

이렇게 아주 간단하게 사용할 수 있다.

const names = ["Alice", "Bob", "Charlie"];

const nameLengths = names.map((name) => name.length);
// nameLengths = [5, 3, 7]

아니면 이렇게도 응용할 수 있다.

이렇게는 보통 return 문 위에 이제 함수를 생성하거나 뭔가 처리를 할 때 사용하고, 컴포넌트를 반복해서 돌릴 때도 있다.

{items.map((value, item) => (
    <div key={item}>
      <p>ID: {value.id}</p>
      <p>Name: {value.name}</p>
    </div>
}

key 값은 반드시 넣어주는 게 좋은데, 이유는 key 속성은 React에서 목록을 렌더링할 때 각 항목을 구별하는 역할을 하기 때문이다.

그럼 이제, 배열없이 해당 컴포넌트를 반복해서 돌리고 싶을 때가 있다.

초보였을 시절에는 이렇게 작성했다. ( 문제는 없었다. )

const emptyArray = [1, 2, 3, 4, 5];

...

{emptyArray.map((value, item) => {
	return <div key={item}}>{value}</div>
}}

근데 이렇게 짜면 누가봐도 코딩 초짜가 짠 것 처럼 보인다. 내가 짜면서도 너무 초보같아서 부끄러운 코드였다.

더 좋은 방법이 있는데 .. 다음과 같이 짜면 아주 간단하다.

{Array(5).fill(null).map((value, item) => {
	return <div key={item}>{value}</div>
	}
)}

돌리고 싶은만큼 배열에 숫자로 주고 나면 원하는 만큼 컴포넌트를 반복해서 돌릴 수 있다.

더 좋은 방법이 있다면 공유해주면 감사하겠다 !!