Key

JavaScript 에서의 List

Array.prototype.map()

map() 메소드는 배열 내의 모든 요소 각각에 대해 callback 함수를 호출한 결과를 모아 새로운 배열 을 반환한다.

const arr = [1, 2, 3, 4]

const arr2 = arr.map((a) => a * 2)

console.log(arr2) // Array [2, 4, 6, 8]

위의 코드는 콘솔에 값 2, 4, 6, 8 을 담고 있는 새로운 Array 를 출력한다.

React 에서 배열을 Element 리스트로 만드는 방식은 위의 방식과 유사하다.

React에서의 map() 활용

아래와 같이 사용하여 listItems를

element 안에 포함할 수 있다.

                        ...

const arr = [1, 2, 3, 4]
const listItems = arr.map((a) => <li>{a}</li>)
                        ...
return (
  <ul>{listItems}</ul>
)

하지만 위의 코드에서는 key 값을 지정해 주지 않았기 때문에 side effect 가 발생할 수 있다.

리액트에서는 같은 Component 인지 아닌지 인지할 수 없기 때문에 특정 Array 의 요소 중 하나가 제거되면 모든 요소를 전부 렌더링 해버린다.

즉 React 에서는 key 값을 비교하여 렌더링의 여부를 결정하게 되는데, 이러한 최적화와 관련된 것이 key 이다.

따라서 아래와 같이 key 값을 명시적으로 지정해야 한다.

                        ...

const arr = [1, 2, 3, 4]
const listItems = arr.map((a) => <li key={a}>{a}</li>)
                        ...
return (
  <ul>{listItems}</ul>
)

key 값을 지정해 줄 때 해당 항목을 고유하게 식별해 줄 수 있는 문자열을 사용하는 것이 좋다.

• 고유한 ID 값
• 렌더링 한 항목에 대해 안정적인 ID 가 없다면 index 를 key 로 활용하는 방법도 있다.