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

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

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

const listItems = numbers.map((number) => {
  <li>{number}</li>
};
                              
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);                              

기본 리스트 컴포넌트

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

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

리스트 항목을 작성할 경우 각 항목에 반드시 key를 정해줘야 한다.

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하도록 해준다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘러먼트에 지정해줘야 한다.

 const listItems = numbers.map((number) => {
    <li key={number.toString()}>{number}</li>
  }

가장 좋은 방법은 리스트 고유의 ID를 Key로 사용하는 것이다.

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

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

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

map() 함수 내부에 있는 엘리먼트에 key를 넣어 주는 게 좋다.

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

key는 배열 안에서 형제 사이에서 고유해야 하고 전체에서는 고유할 필요가 없다. 두개의 다른 배열을 만들 때 동일한 key를 사용할수 있다.

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

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는 힌트를 제공하지만 컴포넌트로 전달하지는 않는다. 컴포넌트에서 key와 동일한 값이 필요하다면 다른 이름의 prop으로 명시적으로 전달해주면된다.

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

Post 컴포넌트는 props.id를 읽을 수 있지만 props.key는 읽을 수 없다.

JSX에 map() 포함시키기

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

map()함수의 결과를 인라인으로 처리할 수 있다.

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

위의 방식을 사용하면 코드가 깔끔해 지지만, 남발은 좋지않다. 가독성을 위해 상황에 따라 알맞게 판단해야 한다. map() 함수가 너무 중첩된다면 컴포넌트로 추출 하는것이 좋다.

참고

해당 포스팅은 실전 리엑트 공식 홈페이지 https://ko.reactjs.org/
리엑트 자습서 https://ko.reactjs.org/docs/lists-and-keys.html 에서 참고하여 작성했습니다.