[React] React의 배열 활용, map 함수 사용하기

안녕하세요.

이번에는 React 컴포넌트 사용 시 배열을 이용해서 출력을 해보겠습니다.

 

먼저 파일들을 아래와 같이 작성해 줍니다.

 

components/ListChild2.jsx

import React from 'react'

export default function ListChild2({title, content}) {
  return (
    <>
        <h2>{title}</h2>
        <p>{content}</p>
        <hr />
    </>
  )
}

 

components/Modal.jsx

import React from 'react'

export default function Modal() {
  return (
    <div className='modal'>
        <h2>오늘 해야할 일 2개</h2>
        <h2>오늘 완료한 일 0개</h2>
    </div>
  )
}

 

components/List2.jsx

import React from 'react'
import ListChild2 from './ListChild2'
import Modal from './Modal'

export default function List2() {
  const dataArr = [
    {
      title: "리액트 공부하기",
      content: "state 활용법 익히기"
    },
    {
      title: "코테 문제 풀기",
      content: "Lv 0 정복"
    }
  ]
  return (
    <div>
        <Modal />
        {/* 이렇게 1개씩 설정해서 데이터를 넘겨주는 방법이 있다. */}
        <ListChild2 title={dataArr[0].title} content={dataArr[0].content} />
        <ListChild2 title={dataArr[1].title} content={dataArr[1].content} />
        <Modal />
    </div>
  )
}

 

App.js

import './App.css';
import List2 from './components/List2';

function App() {
  return (
    <div className="App">
      <List2 />
    </div>
  );
}

export default App;

 

실행결과

• 컴포넌트에서 dataArr[2] 배열을 선언 후에 데이터를 각 컴포넌트에 전달해서 사용한 방식입니다.

 

Map 함수

• React에서는 배열 데이터를 그려 줄 때 배열 함수인 map을 활용합니다.
• List2.jsx 파일만 수정합니다.

components/List2.jsx

import React from 'react'
import ListChild2 from './ListChild2'
import Modal from './Modal'

export default function List2() {
  const dataArr = [
    {
      title: "리액트 공부하기",
      content: "state 활용법 익히기"
    },
    {
      title: "코테 문제 풀기",
      content: "Lv 0 정복"
    }
  ]
  return (
    <div>
        <Modal />
        {/* 1개씩 일일이 설정을 해주면 효율적이지 못하기 때문에
        배열에서 사용할 수 있는 map 함수를 사용한다. */}
        {dataArr.map((el) => {
          return <ListChild2 title={el.title} content={el.content} />
        })}
        <Modal />
    </div>
  )
}

 

• 참고 : 코드에 return 1줄만 있는 경우에는 return + { } 생략 가능 [JavaScript 문법]

{/* 코드에 return 1줄만 있는 경우에는 return + {} 생략 가능 [JavaScript 문법] */}
{dataArr.map((el) => <ListChild2 title={el.title} content={el.content} />)}

 

실행결과

• React에서 map으로 배열 데이터를 그려줄 때에는 해당 요소에 Unique 한 Key 값을 props 로 부여해 줘야 합니다
• 나중에 리액트에서 map 으로 그려진 엘리먼트 중에서 어떤 것을 컨트롤(변경, 추가, 삭제 등)을 할지 구분할 수 있기 때문입니다.
• Key의 값은 전역에서 unique 할 필요는 없지만, 반드시 형제 사이에서는 unique 해야 합니다.
• 보통은 DB에서 받아온 데이터 중에서 Primary Key를 구분 값으로 사용합니다.
• Primary Key가 없는 경우에는 다른 구별이 가능한 값을 사용하며, 최후의 수단으로 index 값을 사용합니다.

 

• List2.jsx 파일만 수정합니다.
• Key 값을 설정하면 콘솔에 경고창이 사라지는 것을 볼 수 있습니다.

components/List2.jsx

import React from 'react'
import ListChild2 from './ListChild2'
import Modal from './Modal'

export default function List2() {
  const dataArr = [
    {
      title: "리액트 공부하기",
      content: "state 활용법 익히기"
    },
    {
      title: "코테 문제 풀기",
      content: "Lv 0 정복"
    }
  ]
  return (
    <div>
        <Modal />
        {/* React에서 map으로 데이터를 출력할 때 Unique한 Key 값을 부여해야한다. */}
        {/* 전역에서는 필요가 없지만 같은 부모 내부에서는 구분이 필요하다. */}
        {/* 보통은 DB에서 받아온 데이터 중에서 Primary Key를 구분 값으로 같지만,
        Primary Key가 없는 경우에는 다른 구별이 가능한 값을 사용하고,
        최후의 수단으로 index 값을 사용한다. */}
        {dataArr.map((el, index) => {
          return <ListChild2 title={el.title} content={el.content} key={index} />
        })}
        <Modal />
    </div>
  )
}

 

실행결과

 

 

• Map의 리턴 값으로 원하는 것을 넣어줘도 됩니다!
• 단, 리턴되는 요소는 반드시 하나의 부모 요소를 가져야만 합니다!
• List2.jsx 파일만 수정합니다.

components/List2.jsx

import React from 'react'
import ListChild2 from './ListChild2'
import Modal from './Modal'

export default function List2() {
  const dataArr = [
    {
      title: "리액트 공부하기",
      content: "state 활용법 익히기"
    },
    {
      title: "코테 문제 풀기",
      content: "Lv 0 정복"
    }
  ]
  return (
    <div>
        <Modal />
        {dataArr.map((el, index) => {
          return (
            <div key={index}>
              <h2>{el.title}</h2>
              <p>{el.content}</p>
              <hr />
            </div>
          )
        })}
        <Modal />
    </div>
  )
}

 

실행결과

 

 

이상으로 React에서 배열을 이용하여 출력하는 방법에 대하여 알아보았습니다.

감사합니다.