반복되는 components 처리 & key

반복 component 예시

 

위에 처럼 똑같은 박스가 연속으로 여러개 만들어 지는 상황을 생각해보자.

사실 우리가 보는 여러 웹사이트에는 같은 박스가 다른 글자만 가지고 반복되어있는 것을 확인할 수 있다.

이걸 우리는 하나하나 타이핑쳐서 개발할 수 없기 때문에 반복되는 component 들을 처리하는 방법을 알고 있어야 한다.

 

 

1. map 메소드 사용

반복되는 내용을 담는 자료형은 Array이다. 배열의 원소를 차례대로 꺼내올 수 있는 map 메소드를 사용하여 반복되는 component를 처리하자.

 

반복 component 예시 - key X

 

위의 그림에서 보는 것처럼 배열에 map을 사용하여 같은 모양의 박스에 배열의 원소를 넣어주는 방식을 사용한다.

이때, 관심갖고 봐야하는 것이 오른쪽 개발자 도구의 warning 창이다.

Each child in a list should have a unique "key" prop.

이렇게 반복되는 태그에는 항상 유일한 값을 담고 있는 key를 부여해야만 한다.

 

 

2. 반복 컴포넌트에 key 적용

key는 데이터를 배열에 넣을 때 부여한다. 이것이 무슨 말이냐면, 각 데이터를 등록, 수정, 삭제 등을 할 때 사용하는 id가 unique한 값이어야 하므로 이 id를 그대로 key로 적용하는 것이다.

반복해서 id를 넣기위해 함수를 선언하여 적용하는 것이 더 효율적이다.

 

key를 적용하는 방법에는 여러가지가 있다. 내가 사용한 방법은 총 3가지가 있는데 이 3가지를 모두 소개하려고 한다.

사실 프로젝트를 진행할 때 대부분 DB에서 뽑아오기 때문에 DB에서 가지고 있는 PK 역할을 하는 인덱스나 id를 쓰는 것이 일반적이지만, 지금은 pk가 없다고 생각하고 JS에서 사용할 수 있는 방법이다.

 

1) 배열의 length

현재 state의 길이에 1을 더해주는 방법이다.

 

const addButtonHandler = () => {

const newUser = {
  id: users.length + 1,
  age,
  name
}

// 배열은 state를 갱신하기 위해서 스프레드를 사용한다.
setUsers([...users, newUser])
}

 

이 방법은 굉장히 간단해서 따로 함수를 만들지 않고 진행했다. 

사실 배열의 length를 사용하는 방법을 쓰지 않는다. 특히, 삭제하는 기능이 있을 때!

삭제하고 다시 추가할 때, index가 겹치는 경우가 많이 생기기 때문에 많이 사용하지 않는다.

 

2) Date.now()

새로운 요소를 추가하는 시간을 Date.now()를 사용한다.

밀리미터 초까지 반환하지만 정말 만약에 같은 타이밍에 요소를 추가할 수도 있기 때문에 뒤에 랜덤한 숫자 3개를 추가하여 id로 사용한다.

const createId = () => {
  const date = Date.now();  // 현재 시간
  return date + '' + Math.floor(Math.random() * 1000)
}

const addButtonHandler = () => {
  const newUser = {
    id: createId(),
    age,
    name
  }

  // 배열은 state를 갱신하기 위해서 스프레드를 사용한다.
  setUsers([...users, newUser])
}

 

3) UUID library

랜덤 키를 발행시킬 때 사용하는 가장 유명한 library인 uuid

uuid는 16바이트 길이의 숫자를 랜덤으로 반환하여 겹치지 않도록 도와주는 패키지이다.

uuid는 버전에 따라 key를 생성하는 규칙이 다른데, 총 5가지 버전이 있다.

• 버전 1 (MAC 주소)
• 버전 2 (DCE 보안)
• 버전 3 (MD5 해시)
• 버전 4 (랜덤)
• 버전 5 (SHA-1 해시)

이 중에서 나는 가장 많이 사용한다고 하는 v4를 사용했다.

 

uuid는 npm에서 내려받아서 사용가능하며 import를 해야한다.

import { v4 } from 'uuid';


const createId = () => {
  const tokens = v4().split('-')
  return tokens[2] + tokens[1] + tokens[0] + tokens[3] + tokens[4];
}
  
const addButtonHandler = () => {
  const newUser = {
    id: createId(),
    age,
    name
  }

  // 배열은 state를 갱신하기 위해서 스프레드를 사용한다.
  setUsers([...users, newUser])
}