리액트에서 배열 렌더링

배열 렌더링

다음과 같은 배열이 있다고 가정했을 때, 이 내용을 컴포넌트로 렌더링하는 방법으로 하드코딩이 있다. 이러한 방법은 배열이 고정적이라면 상관없겟지만, 동적인 배열을 렌더링하지 못한다.

const users = [
  {
    id: 1,
    username: 'velopert',
    email: 'public.velopert@gmail.com'
  },
  {
    id: 2,
    username: 'tester',
    email: 'tester@example.com'
  },
  {
    id: 3,
    username: 'liz',
    email: 'liz@example.com'
  }
];

동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용한다. map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어 준다.

여기서 주의해야 할 점은 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야한다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정 하며 지금의 경우엔 id로 지정할 수 있다.

function UserList() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];
  
  return (
    <div>
  	{users.map((user, index) => (
    	<User user={user} key={index} />
  	))}
	</div>
  );
}

Map에서 Key가 필요한 이유

고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링이 가능하다.
key의 존재한다면 key값에 따라 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제가 가능하다.