Reactjs

React강좌 - 15 - React 및 JSX의 목록 표시 II

조회 385 (작성일 2019.07.31 11:10)
- 음성
- 목록

배열 대신 객체 루핑하기

Array.map()은 배열에서만 작동합니다. 루프를 반복하여 JSX를 사용하여 표시 할 객체가 있다면 전략을 약간 변경해야 합니다. 객체에는 우리가 이용할 수 있는 .map() 메소드가 없습니다.

주요 전략은 Object.keys()를 사용하여 Array를 만들고 이 키를 사용하여 객체에서 값을 가져 오는 것입니다.

우리가 이것을 원했던 이유의 한 예는 객체의 모든 속성을 반복하여 표시하는 것입니다. 예를 들어 person 객체를 가져 와서 속성을 반복 해 봅시다. 목록에 모두 표시되며 "사용자 프로필"보기가 됩니다.

Object.keys()를 사용하여 Object를 배열 할 수 있는 배열로 변환합니다. 예를 들어, Object.keys()를 사용하면 다음 객체가 어떻게 보이는지 보자.

const person = {
    name: 'Chris',
    twitter: 'chrisoncode',
    bio: 'The dude at scotch.io'
};

Object.keys(person); // Array ["name", "twitter", "bio"]

이제 각각의 키를 가져 와서 각 속성의 가치를 얻을 수 있습니다. person['name']이 (가) Chris를 반환합니다.

function App() {
  const person = {
    name: 'Chris',
    twitter: 'chrisoncode',
    bio: 'The dude at scotch.io'
  };

  return (
    <div>
      {Object.keys(person).map(key => (
        <p>{person[key]}</p>
      ))}
    </div>
  );
}

https://codepen.io/chrisoncode/pen/eqWpXZ

결국 우리는 Object.keys()를 사용하여 Array를 만들고 그 키를 사용하여 객체에서 값을 가져옵니다.

키를 레이블로 사용할 수도 있습니다.

function App() {
  const person = {
    name: 'Chris',
    twitter: 'chrisoncode',
    bio: 'The dude at scotch.io'
  };

  return (
    <div>
      {Object.keys(person).map(key => (
        <p>
          <strong>{key.charAt(0).toUpperCase() + key.slice(1)}: </strong>
          {person[key]}
        </p>
      ))}
    </div>
  );
}