[React] map

1. map

1-1.map이란?

map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다.

 

1-2.문법

 - arr.map(callbackFunction(currenValue, index, array), thisArg)

 

 1) callbackFunction : 새로운 배열의 요소를 생성하는 함수로서 다음 세가지 인수를 갖는다.
    ㆍcurrenVlaue : 현재 배열(arr) 내의 값들을 의미
    ㆍindex : 현재 배열 내 값의 인덱스를 의미
    ㆍarray : 현재 배열
 2) thisArg(선택항목) : callback 함부 내부에서 사용할 this 레퍼런스 를 설정한다.

 

map 함수 사용 예

const numbers = [1, 3, 5];
const listItems = numbers.map(function(number){
    console.log(number);
	return number + 1;
});

console.log(listItems);

각 배열의 요소에 +1을 하여 새로운 배열로 생성하는 예제

 

const numbers = [1, 3, 5];
const listItems = numbers.map((number, idx) => {
    console.log(number);
	return number + 1;
});

console.log(listItems);

위의 예제 es6 문법 사용 버전

 

 

2. map으로 컴포넌트 복사하기

• NoName이란 이름의 컴포넌트를 만들어, 재사용할 뷰를 생성

 

import React from 'react'

function NoName( {name , image}){
  return <div>
    <h2>I like {name}</h2>
    <img src = {image}/>
  </div>
}

 

• 이제 이 name과 image에 들어갈 각기 값들을 오브젝트로 생성

const nononame = [
  {
    id: 1,
    name: "Name1",
    image: "대충 이미지1"
  },
  {
    id: 2,
    name: "Name2",
    image: "대충 이미지2"
  },
  {
    id: 3,
    name: "Name3",
    image: "대충 이미지3"
  }
]

 

• Map 사용

function App() {
  return (
    <div>
      {nononame.map(no => (
        <NoName key={no.id} name={no.name} image={no.image}/>
        ))
      }
    </div>
  );
}

우선 map은 array를 리턴함

 

즉 no => 이 표시는 우리가 map을 통해 오브젝트의 구성인 nononame1 -3까지 array형식으로 하나씩 접근하게되고,

반복문처럼 foodILike의 사이즈 만큼 <NoName key={no.id} name={no.name} image={no.image}/> 이 코드가 반복하게되어 총 3번 만들어지게 된다. 

 

그리고 { } 안에 no.id를 써줬으므로, 오브젝트에 한 덩어리의 id를 불러오게 되고, 이 불러온값이  NoName라는 컴포넌트의 key라는 prop에 지정된다. 

 

그리고 id, name image모두 지정이되면 우리가 가장 처음에 만들어줬던 NoName component 함수로 가서 name과 image로 들어간후, 뷰가 만들어진다.

 

3. Props 일일이 다 넣기, item = {item}, {...item}  차이

3-1. Props를 일일이 넣기

React 컴포넌트에서 Props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트에서 Props를 자식 컴포넌트로 전달할 때, 일반적으로 Props를 일일이 넣는 방법을 사용한다. 이 방법은 Props의 이름과 값을 직접 입력하는 방식이다.

 

예를 들어, 다음과 같은 컴포넌트가 있다고 가정해보자

function MyComponent(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

 

이 컴포넌트에 Props를 전달할 때는 다음과 같이 일일이 Props를 입력한다.

<MyComponent title="제목" content="내용" />

 

3-2. {...item}을 사용하여 객체 전달하기

때로는, Props를 객체 형태로 전달할 때가 있다. 이 경우 객체를 전달하는 방법 중 하나는 전개 연산자(...)를 사용하여 Props 객체를 전달하는 것다.

예를 들어, 다음과 같은 Props 객체가 있다고 가정해보자

const myProps = {
  title: "제목",
  content: "내용"
};

이 Props 객체를 컴포넌트에 전달할 때는 다음과 같이 전개 연산자를 사용한다.

<MyComponent {...myProps} />​

이렇게 하면, 전개 연산자를 사용하여 Props 객체의 모든 속성을 컴포넌트에 전달할 수 있습니다. 이 방법은 Props가 많거나 복잡한 경우 편리하며 코드를 간결하게 유지할 수 있다.

 

 

3-3. item = {item}을 사용하여 객체 전달하기

객체를 전달할 때, 때로는 전개 연산자 대신에 객체 리터럴을 직접 사용하는 경우가 있다. 이 경우 객체 리터럴을 직접 전달하는 것이 아니라, 다음과 같이 객체 리터럴을 변수에 할당하고 변수를 전달한다.

const myProps = {
  title: "제목",
  content: "내용"
};

<MyComponent item={myProps} />

이렇게 하면, 객체를 전달하는 것과 같은 효과를 볼 수 있다. 하지만 이 방법은 전개 연산자를 사용하는 것보다 코드가 더 길어지고 복잡해지는 단점이 있다.