React list와 key / React key

※ List (map함수를 이용하여 list 엘리먼트를 반환받음)

- javascript map

// 배열 선언
const numbers = [1, 2, 3, 4, 5];

// .map 함수를 이용하여 list 엘리먼트를 반환받음.
const listItems = numbers.map(number =>
    <li>{number}</li>
);

// list 엘리먼트를 렌더링함
ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById('root')
);

화면 결과

- component화

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map( number =>
        <li>{number}</li>
    );

    // 엘리먼트 리스트를 가진 <ul>엘리먼트를 반환
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers}/>,
    document.getElementById('root')
);

화면 결과는 위와 동일

* 이 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다. 

// 에러 내용
index.js:1 Warning: Each child in a list should have a unique "key" prop.

Check the render method of `NumberList`. See https://reactjs.org/link/warning-keys for more information.
    at li
    at NumberList (http://localhost:3000/static/js/main.chunk.js:416:25)

 

---

※ key : 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다.

• Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
• Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다. (아래 3번 사항 참고)
• 리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.
• React는 이전과 같은 키를 쓰는 DOM 엘리먼트를 발견하면, 동일한 컴포넌트라고 생각합니다.

 

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map( number =>
        // 고유값을 부여해 봅니다.
        <li key={number.toString()}>{number}</li>
    );

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

 

---

- ID 부여 방법

1. key 값으로 대부분의 경우 데이터의 ID를 key로 사용합니다.

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

 

2. 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다.

* 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.

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

 

3. key는 형제 사이에서만 교유한 값이어야 한다.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

---

* React에서 key는 힌트를 제공하지만 컴포넌트 props로 전달하지는 않습니다. 컴포넌트에서 key와 동일한 값이 필요하면 다른 이름의 prop으로 명시적으로 전달합니다.

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

// props.key로 해당 값 접근 불가, props.id로 값에 접근해야 합니다.

 

이전 글 : 2021.11.10 - [UI/React] - React 조건부 렌더링2 논리 연산자

React 조건부 렌더링2 논리 연산자