리스트와 Key | ReactDocs

JavaScript의 리스트 변환

• map() 함수를 이용하여 numbers 배열의 값을 두배로 만든 후 반환된 새 배열을 doubled 변수에 할당

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

console.log(doubled); // [2, 4, 6, 8, 10]

React에서도 리스트로 만드는 방식은 이와 거의 동일

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

엘리먼트 모음을 만들고 중괄호{}를 이용하여 JSX에 포함 시킬 수 있습니다.

• JavaScript map()함수를 사용하여 numbers 배열을 반복 실행
• 각 항목에 대해 <li>엘리먼트를 반환하고 엘리먼트 배열의 결과를 listItems에 저장

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

• 그리고 <ul> 엘리먼트 안에 전체 listItems 배열을 포함할 수 있습니다.

<ul>{listItems}</ul>

기본 리스트 컴포넌트

일반적으로 컴포넌트 안에서 리스트를 렌더링합니다.

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

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

• 위 코드를 실행하면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.
• key : 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트

⇒ numbers.map() 안에서 리스트의 각 항목에 key를 할당하여 키 누락 문제 해결

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

Key

• React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
• 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.
• Key를 선택하는 가장 좋은 방법은 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다.
  • 대부분 데이터의 ID를 사용합니다.

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

• 렌더링 한 항목에 대한 안정적인 ID가 없다면, 최후의 수단으로 항목의 index를 key로 사용할 수 있습니다.
  • 항목의 순서가 바뀔 수 있는 경우 index를 사용하는 것을 권장하지 않습니다.
  • index를 사용할 경우 성능이 저하되거나 컴포텉느의 state와 관련된 문제가 발생할 수 있습니다.
• 명시적으로 key를 지정하지 않으면 React는 기본적으로 Index를 key로 사용합니다.

Key로 컴포넌트 추출하기

key는 주변 배열의 context에서만 의미가 있습니다.

• ListItem 컴포넌트를 추출한 경우, ListItem 안에 있는 <li> 엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 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>
  );
}

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.'},
];

const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Blog posts={posts} />);

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

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

JSX에 map() 포함시키기

• 위의 예시에서는 별도의 listItems 변수를 선언하고 이를 JSX로 포함했으나, map() 함수의 결과를 인라인으로 처리할 수 있습니다.
  • JSX를 사용하면 중괄호 안에 모든 표현식을 포함시킬 수 있다.

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

⇒ 변수로 추출해서 적용할지 인라인으로 적용할지 개발자가 판단하여 사용해야 합니다.

• map() 함수가 너무 중첩된다면 컴포넌트로 추출하는 것이 좋습니다.