[React] Javascript Map 사용하는 방법 (List)

javascript에서 map을 이용해 list의 값을 순차적으로 사용할 수 있음

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

JSX에서도 map을 이용해 아래와 같이 사용이 가능, element 모음을 만들고 중괄호를 이용해야 한다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

리스트의 값을 화면에 렌더링하기 위한 컴포넌트를 생성할때는 아래와 같이 사용이 가능하다. 이때 주의해야할 element list를 만들때는 element의 key가 반드시 필요하다. (이때 key는 고유성을 부여하기 위해서 고유하게 식별할 수 있는 문자열을 사용해야 한다. 보통 데이터의 ID를 key로 사용)

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}