(React) map

map

• array(list, dictionary) 를 조작하여 새로운 array 를 리턴

const fibonacciNumbers = [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
const doubledFibonacciNumbers = fibonacciNumbers.map(number => number * 2)
// [0, 2, 2, 4, 6, 10, 16, 26, 42, 68]


const users = [
  {
    name: "Park",
    age: 51,
    height: "1.90cm"
  },
  {
    name: "Lee",
    age: 22,
    height: "1.67cm"
  },
  {
    name: "Choi",
    age: 47,
    height: "1.59cm"
  }
]

const userNames = users.map(({ name }) => name)
// ['Park', 'Lee', 'Choi']

 

• JSX 내에서 list 를 렌더링

const userNames = ['Park', 'Lee', 'Choi']
function App() {

  return (
    <div>
      <ul>
        {userNames.map(name => <li>{name}</li>)}
      </ul>
    </div>
  );
}

export default App;

 

※ 위의 코드는 문제없이 실행되나 내부적을 Warning: Each child in a list should have a unique "key" prop. 에러가 발생한다.
    map에 의해 생성되는 list 는 unique key 를 가져야 하므로, 아래와 같이 index 를 key 로 지정하자.

const userNames = ['Jesse', 'Tom', 'Anna']
function App() {

  return (
    <div>
      <ul>
        {userNames.map(
           (name, index) => <li key={index}>{name}</li>
        )}
      </ul>
    </div>
  );
}

export default App;