[007] 리액트 (React) 배우기 - List (리스트) + map 활용하기

안녕하세요~ totally 개발자입니다.

 

List, map

 

오늘은 리스트 즉 배열과 map을 활용하여 리액트 JSX로 출력해보는 실습을 해보도록 하겠습니다.

 

Step 1: Student.js 파일을 만들어줍니다. props를 전달받아 firstName, lastName을 출력할 수 있는 리스트를 만들어줍니다.

 

import React from 'react';

function Student(props) {
  return (
    <li>
      {props.firstName} {props.lastName}
    </li>
  )
}

export default Student;

 

Step 2: StudentComponent.js 파일을 만들고 아래처럼 코드를 작성해줍니다. 제일 중요한 부분은 <ol> 태그 사이에 있는 {students.map 부분이며 이 map을 사용하여 배열의 각 요소를 모두 출력할 수 있도록 해줍니다. 위의 Student.js에 props를 사용했기 때문에 여기에서 lastName, firstName의 parameter를 명시해주셔야 합니다. 이 map을 활용하는 것은 매우 중요하기 때문에 반드시 이해하셔야 합니다.

 

import React from 'react';
import Student from './Student';

function StudentComponent() {
  // 배열 초기화
  const students = [
    {id: 1, lastName: 'Andrew', firstName: 'Paul'},
    {id: 2, lastName: 'Brian', firstName: 'Wilson'},
    {id: 3, lastName: 'Catherine', firstName: 'Anna'}
  ];

  return (
    <div style={{textAlign:'left'}}>
      <h1>Student List</h1>
      <ol>
        {students.map((student) => <Student key={student.id} lastName={student.lastName} firstName={student.firstName} />)}
      </ol>
    </div>
  )
}

export default StudentComponent;

 

이 map에 대한 기본적인 사용법은 아래와 같습니다.

const arr = [1,2,3];

arr.map(i => i + 1);

 

Step 3: App.js에 <StudentComponent />를 추가합니다.

 

 

 

Step 4: npm run start하여 테스트합니다.

 

결과

 

다음 시간에는 리액트 라우팅(routing)에 대해 살펴보겠습니다. 감사합니다.