[React] React.js 튜토리얼 5- list와 key

 

 

 

이미지출처: https://velog.io/@hyejeong/%EC%99%9C-React%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

 

 

 

 

 

이전 포스팅을 보려면 아래 링크를 눌러주세요.

 

 

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 4- 조건부 렌더링

[React] React.js 튜토리얼 4- 조건부 렌더링

 

 

 

 

 

react에서 list와 key에 대해서 배워보겠습니다.

먼저, 리스트 형태의 데이터를 출력하는 방법입니다.

리스트는 자바스크립트에서 사용하는 list.map 방식과 동일합니다.

 

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  // 리스트 원소들을 <ul><li></li></ul>로 출력
  const msg = unreadMessages.map((message) => 
    <li>{message}</li>
  );
  
  return (
    <ul>
      {msg}
    </ul>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];

 

 

위 코드를 실행시키면 아래와 같이 리스트 원소들이 <li></li>에 담겨 출력됩니다.

 

 

 

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

대부분의 경우 데이터의 id를 key로 사용하는데, id가 없다면 리스트의 인덱스를 key로 사용할 수 있습니다.

리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  const msg = unreadMessages.map((message, index) => 
    <li key={index}>{message}</li> // key 설정
  );
  return (
    <ul>
      {msg}
    </ul>
  );
}

 

 

 

리스트를 <li></li>로 담은 컴포넌트를 따로 만들어둔다면, List Item 컴포넌트에는 key를 지정할 필요가 없고, 

List Item 컴포넌트를 가져와 사용하는 컴포넌트에서 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>
  );
}

 

 

 

 

위의 Mailbox에 key를 설정한다면, 아래와 같이 수정하면 됩니다.

 

 

function MailItem(props){
  return <li>{props.value}</li>
}

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  // 리스트 원소들을 <ul><li></li></ul>로 출력
  const msg = unreadMessages.map((message, index) => 
    <MailItem key={index} value={message} />
  );
  return (
    <ul>
      {msg}
    </ul>
  );
}

 

 

 

메일 데이터에 id정보가 존재하는 겨우, 아래와 같이 수정할 수 있습니다.

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  // list of dict 데이터 출력
  const msg = unreadMessages.map((message) => 
    <MailItem key={message.id} value={message.mail} />
  );
  return (
    <ul>
      {msg}
    </ul>
  );
}

// 데이터가 list of dict 형태인 경우
const messages = [
  {id: 1, mail: 'hello'},
  {id: 2, mail: 'world'}
];

 

 

 

 

JSX에는 중괄호 안에 모든 표현식을 포함시킬 수 있으므로 map() 함수의 결과를 인라인으로 처리할 수 있습니다.

이 방식을 사용하면 코드가 더 깔끔해지지만, 가독성을 위해서는 변수로 추출하는 것이 좋고, 

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

 

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;

  return (
    <ul>
      {unreadMessages.map((message) => 
        <MailItem key={message.id} value={message.mail} />
      )}
    </ul>
  );
}

 

 

 

여기까지 리스트와 키에 대해서 알아보았습니다.

참고한 React 문서 URL입니다.

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

리스트와 Key – React

 

 

 

 

 

다음 포스팅에서는 폼(Form)에 대해서 알아보도록 하겠습니다.

[React] React.js 튜토리얼 6- 폼(Form)