[React Document] 리스트와 Key

이 포스팅은 React Document 주요개념 리스트와 Key 글을 보면서 React를 습득하면서 내용을 정리하기 위해 작성하는 포스팅입니다.

React에서 배열을 엘리먼트 리스트로 만드는 방식은 Javascript와 거의 동일합니다 .

일단 Javascript에서 리스트를 만드는 방식은 다음과 같습니다.

const numbers = [1,2,3,4,5]
const doubled = numbers.map(number => number * 2)

React에서 여러개의 element를 렌더링 시키기 위해서는 다음과 같이 사용하면됩니다.

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

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

💡 List 구현시 Key란

실제로 위의 코드를 돌려보면 콘솔창에
Warning: Each child in a list should have a unique "key" prop.이라는 경고 메세지가 표시 됩니다.

key란 React가 list에서 항목을 변경, 추가, 삭제할때 어떤 항목을 식별할지 돕는 속성값입니다. key는 React에서 엘리먼트에 고유성을 부여하기위해 배열 내부의 엘리먼트에 속성을 지정합니다.

const users = [
  {
    id : 1,
    name:"YundleYundle",
    age : 29
  },
  {
    id : 2,
    name:"nextYearYundleYundle",
    age : 30
}];
const userElements = users.map((user) =>
  <li key={user.id}>
    {user.name}
  </li>
);

위와 같이 반복되는 부분에 id를 사용하면 됩니다.
반복문에 사용되는 index를 사용해도 괜찮으나 항목의 순서가 바뀌는 경우 key에 인덱스를 사용하는것을 권장하지 않습니다 . 이러한 방법으로 인해 성능의 저하를 일으키거나 state와 관련된 문제가 발생할 수 있다고 합니다.

따라서 key에는 index를 사용하는것을 지양하며, 데이터의 id를 key로 사용하는것을 지향합니다!

💡 Key는 형제 사이에서만 고유한 값이어야 한다.

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

리스트와 Key를 공부하면서 하위 컴포넌트에서 key 값을 사용하려고 했으나 React에서는 key라는 힌트를 제공하지만 컴포넌트로 전달하지는 않는다. 따라서 key값을 꼭 사용해야겠다면 다른이름의 props로 전달해서 사용하시면 됩니다.