[react]Map()함수

 

리액트 까막눈인 나도 보이는 map()함수의 중요성...아주 많이 사용되는 것 같다.

나에겐 너무도 어려운 Map()..함수! 오늘로 너 정복한다. 

 

<<오늘의 목표 더도 말고 덜도 말고 Map함수 뽀시기!>>

 

 

( •_•)>⌐■-■

 

---

 

🪐 Map() 함수의 정의 

map() JavaScript의 배열 메서드 중 하나로, 반복되는 컴포넌트를 렌더링하기 위해 사용된다.

배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열 혹은 리스트를 생성한다.   

react의 jsx에서는 if문과 같이 for문을 사용할 수 없어서, 반복문을 사용하려면  map함수를 써야한다!

 

 

 

 

🌌Map()함수 기본 구조

const newArray = array.map((currentValue, index, array) => {
                    return newValue;
});

 

currentValue : 현재 배열 요소의 값
index : 현재 배열 요소의 인덱스
array : 원본 배열

 

 

여기서 나는 굉장히 원초적인 질문들이 물음표 마냥 떠다녔다..

const로 선언된 배열 이름은 students

students의 배열을 map함수로 변경할 때 단수형인 student.map으로 쓰는 건지 궁금했다.

삐약이에겐 알파벳 하나 하나가 긴장 요소이다.

혹시 내가 모르는 규칙이 있을까봐 ::>_<::

 

지피티가 알려준 정답

배열은 복수형(students)으로, 배열의 각 요소는 단수형( student )으로 이름을 붙이는 것이 일반적인 패턴이다.

 

(그렇다..너무 쫄아있었다.)

 

 

(또 궁금했던 것..혹시나 저 같은 분이 있을 수 있으니.. 기록...)

 

1. map 뒤에 괄호가 2개일 때

map 뒤에 괄호가 2개일 때는 map 메소드에 전달하는 콜백 함수의 문법

 

const newArray = array.map((element) => { // 코드 블록 });

여기서 array.map((element) => { ... })는 map 메소드가 배열의 각 요소를 순회하면서

요소에 대해 콜백 함수 실행하여 새로운 배열을 만드는데 사용된다.

 

2. => 다음에 { 소괄호가 올 때

=> 다음에 {}가 오는 경우는 함수의 본문을 정의하는 부분

const squaredNumbers = numbers.map(number => { return number * number; });

여기서 number => { return number * number; }는 number라는 인자를 받아서

{} 블록 안의 코드를 실행하는 화살표 함수 블록 내에서 return을 사용하여 결과를 반환한다.

 

3. => 다음에 {}가 없이 한 줄일 때

한 줄로 작성할 수도 있다.

 

 

 

 

 

🌍Map() 함수 예시

• Map함수를 이용해 <li>를 간결하게 만들어 보기! 

function App(){
    return(
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    )
}

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

const listItems = array.map((item)=> <li>{item}</li>);

return(
  <ul>{listItems}</ul>  
);

array 배열의 각 요소를 반복하여, 새로운 배열 listItems을 만들고

이 배열을 렌더링해 ul리스트를 생성!

 

 

 

 

• Map()함수를 이용하여 numbers의 배열 요소들을 전부 *2 해보기!

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

const doubledNumbers = numbers.map((number) => {
    return number * 2;
});

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

 

map()을 사용하면 기존 배열을 변형하지 않고 새로운 배열 생성!

 

 

• 배열의 각 요소를 JSX 엘리먼트로 변환하여 목록 만들기!

const names = ["Alice", "Bob", "Charlie"];
const nameList = names.map((name, index) => {
    return <li key={index}>{name}</li>;
});

 

[
  <li key={0}>Alice</li>,
  <li key={1}>Bob</li>,
  <li key={2}>Charlie</li>
]

nameList의 JSX 배열을 생성

 

function NameList() {
  return (
    <ul>
      {nameList}
    </ul>
  );
}

NameList 컴포넌트는 <ul> 엘리먼트 안에 nameList 배열을 삽입하여 <li> 요소들을 리스트로 렌더링.

 

 

 

🌝 Map함수 적용시 key props를 부여하는 이유 

난 Key라는 개념이 어려웠다. key만 나오면 동공이 지진되는.. 

그래서 찾아보고 정리해본 Key. 알고보면 어렵지 않은 너

 

<<key=주민등록번호다>>

 

• key는 배열 원소 하나 하나를 정확하게 알 수 있는 문자열 어트리뷰트.
• 배열의 원소들을 추가, 삭제, 변경할 때 식별할 수 있는 고유의 값.
• map 함수 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하는 것과 동일하게 작성!

(위 말이 이해가 안가서  찾아봤어요...함수 인자..props...?)

 

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 30 },
  { id: 3, name: "Charlie", age: 35 },
];

const userList = users.map((user) => {
  return <User key={user.id} name={user.name} age={user.age} />;
});

 

users.map((user) => {...}):

map을 사용해 users 배열을 순회하면서 각 사용자 객체를 User 컴포넌트로 변환

 

<User key={user.id} name={user.name} age={user.age} />:

각 사용자 객체의 id, name, age를 User 컴포넌트의 key, name, age라는 props로 전달

 

key={user.id}:

React에서 각 컴포넌트는 고유한 key값을 id 주었음

 

function User({ name, age }) {
  return (
    <li>
      {name} is {age} years old.
    </li>
  );
}
----------------------------------------
//usrList 렌더링 결과
<ul>
  <li>Alice is 25 years old.</li>
  <li>Bob is 30 years old.</li>
  <li>Charlie is 35 years old.</li>
</ul>

 

 

🤷‍♂️Map()함수의 Key+1이 붙는 이유(공부하면서 어려웠던 부분)

import React from "react";

function SkillsList() {
  const skillText = ["HTML", "CSS", "JavaScript", "React"];
  
  return (
    <ul>
      {skillText.map((skill, key) => (
        <li key={key}>
          <span>{key + 1}. </span> {/* key는 0부터 시작하므로 +1을 해서 1부터 번호를 부여 */}
          {skill}
        </li>
      ))}
    </ul>
  );
}

export default SkillsList;

 

리액트로 포트폴리오를 만드는 중에 Key값에 왜 1이 붙을지 궁금해졌다.

 

key는 map 함수에서 자동으로 제공되는 배열 요소의 인덱스로, 0부터 시작

 

 

<span>{key + 1}. </span>

 

key + 1을 통해 인덱스 값에 1을 더해준다.

 

이로 인해 인덱스 0, 1, 2, 3이 각각 1, 2, 3, 4로 변환되어,

화면에 사용자에게는 "1.", "2.", "3.", "4."로 표시된다.

 

예시)

key가 0일 때, key + 1은 1이 되어 첫 번째 항목은 "1."로 표시
key가 1일 때, key + 1은 2가 되어 두 번째 항목은 "2."로 표시

key + 1을 사용하여 각 항목에 1부터 시작하는 번호 부여

 

 

 

 

 

🐱‍👤결론

• map 함수로 여러 컴포넌트를 불러올 수 있는 큰 장점이 있다.
• 불변성을 유지한다.(기존 배열 변경x, 새로운 배열 반환)
• 코드가 간결하고 가독성이 좋다.
• 다양한 변환 작업 처리에 좋다.

 

 

 

🎅내 생각

map함수 어렵다고 흐린 눈 하면서 지나쳤는데, for문보다 재밌다.

역시 배움에는 끝이 없습니다.

GPT에게 Map함수 문제 내달라고 하고 풀기를 5번, 이제야 나는 감을 잡았다.

집 가기전까지 3문제만 더 풀어보고 포트폴리오 수정을 하러 총총

 

 

---

🧐참고 사이트

seola1ne.log

안론머스크

@chatGPT