리액트에서 배열 데이터를 화면에 출력하는 방법

사람에 대한 이메일 정보가 여러 개 등록되어있다고 하면 javascript을 이용하여 객체를 만들고 반복문으로 객체를 만드는 작업을 해야했다. 리액트에서는 더 쉽고 간편하다. 다음과 같은 데이터가 있고 화면에 아래와 같이 나타내고 싶다.

const users = [        
  {id:1,username:'bob',email:'bob@gmail.com'        },        
  {id:2,username:'aoa',email:'aoa@gmail.com'        },        
  {id:3,username:'bob',email:'coc@gmail.com'        }    
  ];

 

 

---

    function User({ user }) {
      return (
        <div>
          {user.username} ({user.email})
        </div>
      );
    }

    function UserList({ users }) {
      return (
        <div>
          {users.map(user => (
            <User user={user} />
          ))}
        </div>
      );
    }

---

1. user 객체를 받아서 이름과 이메일을 가지는 div 객체를 만들어준다.

    function User({ user }) {
      return (
        <div>
          {user.username} ({user.email})
        </div>
      );
    }

 

2.  users에는 사람별 데이터를 props로 받아온다.

 

3. javascript의 map을 사용하여 배열을 순차적으로 진행하며 액션을 취한다. <User user={user} /> 을 통하여 User 컴포넌트를 만들 때 props로 user하나를 넘겨준다.

 users.map(user => <User user={user} />);