[React] 8. 리스트와 Key

출처: React 공식 홈페이지

리스트와 Key – React (reactjs.org)

 

 

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

> map()함수를 이용

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

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

 

 

2. 기본 리스트 컴포넌트

> key={number.toString()} 이 없으면 key 누락 warning이 뜬다.

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

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

 

 

3. Key

> Key는 React가 어떤 항목을 변경, 추가, 삭제 등을 할때 도움을준다.
> 중복이 되지않는 값 혹은 마지막 수단으로 key={index} 등을 사용한다. index는 안쓰는것을 권장.
> Key의 위치에 주의

잘못된 Key 사용 예제)

function ListItem(props) {
  const value = props.value;
  return (
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 틀렸습니다! 여기에 key를 지정해야 합니다.
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

 

올바른 Key 사용 예제)

function ListItem(props) {
  // 맞습니다! 여기에는 key를 지정할 필요가 없습니다.
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 맞습니다! 배열 안에 key를 지정해야 합니다.
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

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

 

 

4. Key 반복되는 사이클 안에서만 고유하면 되고, 전체 범위에서 고유값을 가질 필요는 없다.

> 아래 예제에서 key로써 post.id를 두번 사용한다.

 

예시)

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')
);

 

 

5. Key는 하위 컴포넌트로 전달되지 않는다

> 아래 예제에서 Post 컴포넌트는 props.id를 읽을 수 있지만 props.key는 읽을 수 없다.

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

 

 

6. JSX에 map() 포함시키기

> 아래 두가지 방법 사용 가능. 아래 방법 1을 방법 2처럼 쓸 수도 있다. 코드가 짧아지는 대신 가독성이 안좋아진다.
> 등가 교환이므로 판단은 알아서. map() 함수가 너무 중첩된다면 컴포넌트로 추출하는 것도 방법이라고 한다.

방법1)

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

 

방법2)

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />
      )}
    </ul>
  );
}