Rendering Lists

JavaScript의 배열 메서드를 사용하여 데이터 배열을 조작할 수 있다. filter() 혹은 map()을 많이 사용한다.

 

배열 데이터 렌더링

아래와 같은 목록이 있다고 해보자.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

 

 

위와 같은 리스트의 형식으로 우리는 데이터를 다르게 하거나, 원하는 값만 뽑아낸다거나 하고싶을 수 있다. 또는 모든 리스트에 대해 어떠한 작업을 추가로 해서 렌더링 시키고 싶을 수 있다. 그럴때 map() 메서드를 이용하는데 다음과 같은 과정을 거치면 된다.

 

1. 데이터를 배열로 이동:

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

 

2. map()을 이용하여 새 배열을 만듦

const listItems = people.map(person => <li>{person}</li>);

 

3. listItems를 반환

return <ul>{listItems}</ul>;

 

 

결과는 다음과 같다.

 

하지만 콘솔에 각 자식 목록은 "key" 속성이 있어야 한다는 오류가 나온다. 이것을 고치는 방법은 뒤에서 알아보자.

 

 

key를 이용하여 순서대로 목록을 유지하기

key는 배열 항목이 정렬되어서 인덱스가 바뀌거나, 삽입되거나, 삭제되거나 할 때 매우 중요하다. 각 자식 요소가 다른 형제 요소와 다르다는것을 나타내기 위해서 key 속성을 사용해야 한다. 만약 리스트가 변할일이 없거나 할 때는 리스트의 인덱스를 key로 사용할 수 있다. 하지만 그렇지 않을 경우에는 보통 DB의 id값을 가져오던가, id를 데이터에 꼭 포함시켜서 key로 사용한다.

 

 

key는 어디서 얻어올까?

• 데이터베이스의 데이터: DB의 고유한 키 / ID를 사용할 수 있다.
• 로컬에서 생성된 데이터: 데이터가 로컬에서 생성되고 유지되는 경우에는 crypto.randomUUID() 또는 uuid 패키지를 사용한다.

 

 

key 규칙

• key는 형제 간에 고유해야 한다. 하지만 다른 배열의 JSX 노드에 동일한 키를 사용해도 된다.
• key는 변경되어서는 안된다.