[react study] lists and keys

https://reactjs.org/docs/lists-and-keys.html

기존 자바스크립트에서 새로운 배열을 넣어주던것과 비슷한 방식이다.

자바스크립트에서 새로운 배열 만들기

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

// [2, 4, 6, 8, 10]이 콘솔에 찍힌다.

1. 복수의 component를 render

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

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

2. 기본 List Component

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

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

3. Keys

key는 React가 어떤 항목이 바뀌고 추가되거나 지워졌는지 알게해준다.
key는 elements에 안정적인 아이덴티티를 주기 위해 array 내부에 elements를 받아야한다.

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

key를 고르는 최고의 방법은 형제들 중에 리스트 아이템을 독특하게 식별할 string을 사용하는 것이다. 가장 자주 사용되는건 당신의 data로부터 온 key로서의 ID들이다.

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

render될 item들을 위한 안정된 ID들이 없을 경우, 최후의 수단으로 item index를 key로 사용할 수도 있다.

const todoItems = todos.map((todo, index) =>
  //안정된 ID가 없을 경우에만 사용할 것.
  <li key={index}>
    {todo.text}
  </li>
);

item의 순서가 바뀔지도 모른다면 index를 사용하는것은 추천하지 않는다. 부정적인 영향을 주거나 component state에 문제를 발생시킬 수도 있다. 특정한 key를 list item에 할당하지 않는다면 React는 기본으로 index를 key로 사용할 것이다.

4. key로 component를 추출하기
Q. ?????

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

경험상 map()안에 있는 element에 key가 필요하다.

5. key는 반드시 유니크해야한다

array 안에 있는 key들은 그들의 형제 사이에서 반드시 독특해야한다. 그러나, global 하게 독특할 필요는 없다. 2개의 다른 배열을 만들었을 때 동일한 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는 React에 힌트를 제공하지만 component들에 전달되지는 않는다. 만약 component에 동일한 value가 필요하다면 다른 name을 이용해 prop로 전달해라.

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

위에 있는 예제에 따르면 Post component는 props.id는 읽을 수 있지만 props.key는 읽을 수 없다.

6. JSX에 map() 끼워넣기

예제에서 분리된 listItems 변수를 선언하고 JSX에 포함시켰다.

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

JSX는 어떠한 expression이라도 {} 안에서 허용되기때문에 map() result를 inline에 넣을 수 있다.

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