리액트(React) - 컴포넌트 반복 및 리스트, Key

리액트를 공부하면서 쓰는 글이니 오류가 있을 수 있습니다. 오류가 있다면 알려주세요!

 

기본 자바스크립트에서 배열을 이용해 원하는 규칙을 통해 새로운 배열을 만들고 싶은 경우 map() 메서드를 사용합니다.

 

이 map() 메서드를 이용하면 배열이 가지고 있는 요소를 규칙이 있는 함수에 전달하여 가공하여 새로운 배열을 만들 수 있습니다.

엘리먼트 반복 및 컴포넌트 반복

리액트에서 map() 메서드를 이용해 엘리먼트 코드 또는 컴포넌트를 반복하여 새로운 엘리먼트 배열을 만들 수 있습니다. 이 배열을 통해 배열에 있는 여러 개의 엘리먼트를 렌더링 할 수 있습니다.

//app.js
function App() {
  const colors = ["red","blue","green","yellow","skyblue"];
  const colorList = colors.map((color) => <li>{ color }</li>);
  return (
    <div>
      <ul>{colorList}</ul>
    </div>
  )
}

export default App;

여러 개의 색상을 가지고 있는 배열 변수를 이용해 map() 메서드를 사용하여 새로운 엘리먼트 배열을 만들어 colorList에 저장합니다.

 

이렇게 저장된 색상 리스트는 ul 엘리먼트의 자식으로 렌더링 됩니다. 이렇게 엘리먼트를 사용하여 리스트를 만들어 렌더링 할 수 있고 컴포넌트를 따로 만들어 사용할 수 있습니다.

//ColorItem.jsx
import React, { Component } from 'react';

class ColorItem extends Component {
    constructor(props) {
        super();
        this.colors = props.colors;
    }
    
    render() {
        return (
            <li>{ this.colors }</li>
        )
    }
}

export default ColorItem;

//app.js
import ColorItem from './ColorItem';

function App() {
  const colors = ["red","blue","green","yellow","skyblue"];
  const colorList = colors.map((color) => <ColorItem colors={color}/>);
  return (
    <div>
      <ul>{colorList}</ul>
    </div>
  )
}

export default App;

간단한 예제를 보면 ColorItem 컴포넌트를 반복하여 색상 리스트를 만들었습니다.

 

리스트 및 Key

리액트에서 Key는 항목을 변경, 삭제, 추가할 때 식별하는 고윳값입니다. 

 

Key가 되어야 하는 값은 중복되지 않고 고유한 값이어야 합니다. 데이터베이스에서 사용하는 기본키처럼 사용됩니다.

//app.js
function App() {
  const colors = [{id:1,color:"red"},{id:2,color:"green"},{id:3,color:"blue"},{id:4,color:"yellow"}];
  const colorList = colors.map((color) => <li key={color.id}>{color.color}</li>);
  return (
    <div>
      <ul>{colorList}</ul>
    </div>
  )
}

export default App;

보통 Key값을 고유한 값으로 사용되지만 정말 없다면 map() 메서드에서 전달해주는 인덱스 값을 사용해야 합니다.

 

리스트를 만들 때 key값을 인덱스로 한다면 배열의 항목이 변경되면 배열의 인덱스와 값이 달라지기 때문에 state를 사용할 때 문제가 발생할 수 있으니 되도록이면 사용하지 않고 고유한 값을 사용해야 합니다.

 

리스트를 만들 때 엘리먼트로 하는 경우 엘리먼트에 key를 사용하고 컴포넌트를 이용해서 리스트를 만들 경우 컴포넌트에 key를 사용해야 합니다.

//app.js
import ColorItem from './ColorItem';

function App() {
  const colors = [{id:1,color:"red"},{id:2,color:"green"},{id:3,color:"blue"},{id:4,color:"yellow"}];
  const colorList = colors.map((color) => <ColorItem key={color.id} colors={color.color}/>);
  
  return (
    <div>
      <ul>{colorList}</ul>
    </div>
  )
}

export default App;

Key는 속성으로 사용되지만 컴포넌트에 props에 전달되지 않습니다. key가 아닌 다른 속성으로 전달해야 합니다.

 

참고

리액트를 다루는 기술(개정판) - 김민준 지음

https://ko.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React