[React] List와 key의 개념과 컴포넌트 렌더링 - map(), filter()

List and keys

---

List

목록, 컴퓨터 프로그래밍에서는 같은 아이템을 순서대로 모아놓은 것을 의미한다.

리스트를 위해 사용하는 자료 구조가 바로 Array(배열)인데,
배열은 JavaScript의 변수나 객체들을 하나의 변수로 묶어놓은 것을 의미한다.

 

const numbers = [1,2,3,4,5]

 

✅ 배열을 사용하여 리스트 형태로 Element들을 렌더링할 수 있다.

 

 

Key

컴퓨터 프로그래밍에서 각 객체나 아이템을 구분할 수 있는 고유한 값을 의미한다.

리액트에서의 key는 리스트 안의 아이템들을 구분하기 위한 고유한 문자열을 의미한다.

 

여러 개의 컴포넌트 렌더링하기

---

map()

map함수는 mapping이라는 단어로 이해할 수 있다.

mapping은 '어떤 값에 다른 값을 대응시키는 작업' 의미하는데,

map()는 배열에 들어있는 각 변수에 어떤 처리를 한 뒤 리턴하는 것을 의미한다.

 

📌 Usage

const doubled = numbers.map((number) =>  number * 2 )

 

📌 예제1-1. 리액트에서 map() 사용하여 Element 렌더링하기

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

ReactDOM.render(
	<ul>{listItems}</ul>,
    document.getElementById('root');
)

 

📌 예제1-2. 예제1-1을 이용하여 List Component 구성

function NumberList(props) {
  const numbers = props;

  const listItems = numbers.map((number) => {
    <li>{number}</li>
  })

  return (
    <ul>{listItems}</ul>
  )
}

const numbers = [1,2,3,4,5]

ReactDOM.render(
  <NumberList numbers={numbers}/>,
  document.getElementById('root')
)

 

filter()

Array.prototype.filter(), 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

 

📌 Usage

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]

 

List의 key

---

앞서 key는 아이템들을 구분하기 위한 고유한 문자열을 의미한다고 했는데,

리액트에서 key는 리스트에서 어떤 아이템이 변경, 추가, 혹은 제거되었는지 구분하기 위해 사용한다.

 

일상에서도 key를 사용하는데, 주민등록번호, 학번, 핸드폰번호, 여권 번호, ... 등이 있다.

모두 고유하다는 특징을 가지고 있는데, 이 고유성은 특정 범위 내에서만 유효하면 된다. (국가, 학교 등)

 

✅ key는 같은 리스트에 있는 Element 사이에서만 고유한 값이면 된다.

 

📌 key로 값을 사용하는 경우

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

 

리스트에 같은 값을 가지는 아이템이 있는 경우,

key 또한 중복되기 때문에 고유해야 한다는 조건을 충족하지 못한다.

 

 

📌 key로 id을 사용하는 경우

const todoItems = todos.map((todo)=> {
  <li key={todo.id}>
    {todo.text}
  </li>
})

id 자체가 고유한 값을 의미하기 때문에, key로 사용하기 적합하다.

✅ 그러므로, id가 있는 경우에는 id를 key로 사용한다.

 

 

📌 key로 index를 사용하는 경우

const todoItems = todos.map((todo, index)=> {
  <li key={index}>
    {todo.text}
  </li>
})

map()에서 두 번째 파라미터로 제공해주는 index를  key로 사용한다.

index는, 배열 내에서 현재 아이템의 index를 의미한다.

index도 고유한 값이기 때문에 key로 사용할수 있다. 

 

하지만, 배열에서 아이템의 순서가 바뀔 수 있는 경우에는 이를 권장하지 않는다.

즉, 아이템들의 고유한 id가 없을 경우에만 index를 key로 사용해야 한다.

리액트에서는 키를 명시적으로 넣어주지 않으면, index를 key로 사용한다.

 

✅ map() 안에 있는 Element는 꼭 key가 필요하다.

 

 

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션10. Lists and keys
• Array.prototype.filter() - JavaScript - MDN Web docs