React | Iterator : Array.map()

Iterator

 반복자(Iterator)는 객체 지향적 프로그래밍에서 배열이나 그와 유사한 자료 구조의 내부 요소를 순회(traversing)하는 객체이다. 즉, 반복자는 배열 객체 내에서 순회하며 저장된 요소에 접근하여 각각의 요소에 원하는 로직을 구현하는(processing) 일반화된 방법을 제공한다.

 

 Java에서는 'Iterator()'라는 인터페이스가, React에서는 배열 객체에 내장된 메서드인 'map()'이 반복자의 역할을 수행한다.

 

Array.map()

 'arr.map(callback, [thisArg])'의 문법으로 사용된다. 콜백 함수는 새로운 배열의 요소를 생성하는 함수로 다음 세가지 파라미터를 가진다.

 

· currentValue : 현재 처리되고 있는 요소

· index : 현재 처리되고 있는 요소의 index 값

· array : 메서드가 불려진 배열

 

 thisArg의 경우 선택사항으로 callback 함수 내부에서 사용할 this값을 설정하는데 이용된다.

 

 이제 반복자를 이용하여 컴포넌트들을 생성해보자.

 

import React from 'react';
import User from './components/user';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {id: 'kimkim1', pwd: '123456', name: 'Kim'},
        {id: 'leelee2', pwd: '234567', name: 'Lee'},
        {id: 'baebae3', pwd: '345678', name: 'Bae'},
        {id: 'parkpark4', pwd: '456789', name: 'Park'}
      ]
    }
  }
  render() {
    const { users } = this.state;

    return (
      <div className="App">
        {users.map( (user, index) => {
          return <User info={user}/>
        } )}
      </div>
    );
  }
}

export default App;

 

 users라는 배열에 담긴 요소들을 반복자인 map()을 이용하여 User 컴포넌트에 props로 전달해주었다. 

 

// user.js

import React from 'react';

class User extends React.Component {
  render() {
    const { id, pwd, name } = this.props.info;

    return(
      <div className='user_info'>
        ID: {id} <br/>
        PASSWORD: {pwd} <br/>
        NAME: {name} <br/><br/>
      </div>
    )
  }
}

export default User

 

 User 컴포넌트는 props로 전달받은 배열의 요소를 웹 페이지에 띄워준다.

 

코드 실행 결과

 배열의 요소들이 각각 User 컴포넌트의 형식으로 페이지에 나타났다. 페이지는 정상적으로 응답을 하지만 콘솔창을 확인하면 다음과 같은 에러문구가 발생한다.

 

고유 key prop을 지정하라는 에러문구

 

 반복자를 이용하여 동일 컴포넌트를 여러개 나타낼 경우 각각의 컴포넌트를 구분하는 key값을 지정해주어야 한다. 이는 보통 자료의 고유 ID를 이용하는데 없을 경우에는 배열의 index를 이용하면 된다.  위의 App.js 코드를 다음과 같이 수정하여 key prop을 지정해주자.

 

<div className="App">
  {users.map( (user, index) => {
    return <User key={index} info={user}/>
  } )}
</div>

---

Reference

 

· https://velopert.com/957

· https://hyeonstorage.tistory.com/318