[React] 반복되는 컴포넌트 효율적으로 사용 (map() 함수)

※배워가고 있는 학생입니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다😊

1) 개요

웹 어플리케이션을 만들다 보면 반복되는 코드를 작성할 때가 있다.

그래서 오늘은 리액트에서 반복되는 코드를 효율적으로 작성하는 방법에 대해 적어보려 한다!

 

2) map() 함수

자바스크립트 배열 객체의 내장 함수인 map 함수를 사용해서 반복되는 컴포넌트를 렌더링할 수 있다.

map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다.

 

arr.map(callback, [thisArg])

• callback: 새로운 배열의 요소를 생성하는 함수

- currentValue: 현재 처리하고 있는 요소

- index: 현재 처리하고 있는 요소의 index 값

- array: 현재 처리하고 있는 원본 배열

• thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스

 

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map(num => num * num);
console.log(result); //[1,4,9,16,25]

위는 map 함수를 활용한 예제이다.

numbers 라는 기존 배열을 이용해서 요소들을 제곱한 값을 담은 result 라는 새로운 배열을 배열을 만들었다. 

 

이와 똑같은 원리로 기존 배열로 컴포넌트로 구성된 배열을 생성할 수 있다!

 

3) key

컴포넌트를 적어보기 전, key 에 대해서도 알고 넘어가야 한다.

리액트에서 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.

 

key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.

key 값은 언제나 유일해야 하기 때문에, 데이터가 가진 고윳값을 key 값으로 설정해야 한다.

이런 고윳값이 없는 경우에는 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하기도 하는데,

index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못하기 때문에 요소가 추가만 되는 배열인 경우에 쓰거나 (삭제하는 경우는 되도록이면 쓰지 않는 것이 좋다) index와 어떤 요소(문자)를 합쳐서 key 값으로 부여하는 것이 좋다.

4) 활용 예제

위에서 배운 것들을 활용하여 예제를 만들어보자. 가령 다음과 같은 컴포넌트가 있다고 가정하자.

import React from ‘react‘;
 
const IterationSample = () => {
  return (
    <ul>
      <li>눈사람</li>
      <li>얼음</li>
      <li>눈</li>
      <li>바람</li>
    </ul>
  );
};
 
export default IterationSample;

코드에서 <li>…</li> 가 계속 반복되고 있다. 우리는 이것을 map 함수를 이용하여 효율적으로 만들어볼 수 있다.

import React from 'react';
 
const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const nameList = names.map(name => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};
 
export default IterationSample;

아까 <li>...</li> 코드 내의 문자열을 배열로 구성하고 그 배열 값을 사용하여 JSX 코드로 된 배열을 새로 생성한 후  nameList에 담아 return 해주면 된다.

여기까지만 하면 "key" prop이 없다는 경고 메시지를 표시한다. 

앞서 말한 것처럼, 리액트가 컴포넌트 배열에서 어떤 원소에 변동이 있었는지 알아내야 하기 때문에 key는 필수적으로 적어주어야 한다.

import React from 'react';
 
const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const namesList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{namesList}</ul>;
};
 
export default IterationSample;

이렇게 하면 map으로 반복되는 코드를 효율적으로 적을 수 있다!

5) 참고자료

- 리액트를 다루는 기술 

https://thebook.io/080203/

더북(TheBook): 리액트를 다루는 기술 [개정판]

- 인프런 '웹 게임을 만들며 배우는 React' (zero cho)

https://www.inflearn.com/course/web-game-react

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의