[React 리액트] 리스트(배열) 데이터 여러 개 출력하는 방법 (props, key)

React 리스트(배열) 데이터 여러 개 출력하는 방법

 

React에서 리스트(배열) 데이터를 props로 받아 여러개의 데이터를 jsx 파일에서 출력, 렌더링하는 방법을 알아보겠습니다.

 

 

# React 리스트 타입 데이터 여러개 출력하는 방법

 

① contents 라는 state에 데이터를 리스트(배열) 형식으로 저장해 두고 자식 컴포넌트인 TOC 컴포넌트에 props로 데이터 값을 전달합니다.

 

App.js - 부모 컴포넌트

import React, { Component } from 'react';
import TOC from "./components/TOC"
import Content from "./components/Content"
import Subject from "./components/Subject"
import './App.css';

class App extends Component{
  // 컴포넌트가 실행될 때 constructor가 먼저 실행되면서 초기화를 담당한다.
  constructor(props){
    super(props);
    this.state ={
      subject:{title:'WEB', sub:"World Wide Web!"},
      contents:[ // TOC 컴포넌트에 전달 할 state값 초기화
        {id:1, title:'HTML', desc:"HTML is for information"},
        {id:2, title:'CSS', desc:"CSS is for design"},
        {id:3, title:'JavaScript', desc:"JavaScript is for interactive"}
      ]
    }
  }

  render(){
    return (
      <div className="App">
          <Subject 
            title={this.state.subject.title} 
            sub={this.state.subject.sub}>
          </Subject>
          <TOC data={this.state.contents}></TOC>  // TOC에 값 전달 (리스트 형식)  
          <Content title="HTML" desc="HTML is HyperText Markup Language"></Content>
      </div>
    );
  }
}

export default App;

 

 

② 자식 컴포넌트인 TOC 컴포넌트에서 this.props.data; 로 데이터를 읽어 길이만큼 while문을 사용하여 생성합니다. 이후 lists 배열에 push하여 담은 엘리먼트를 return할 때에는 {lists}하면 끝입니다.

 

TOC.js - 자식 컴포넌트

import React, { Component } from 'react';

class TOC extends Component{
    render(){
      var lists = [];
      var data = this.props.data; // props로 데이터 읽기
      var i = 0;
      while(i < data.length){ // 길이만큼 반복하며 lists에 push
      
      	// react는 여러개의 데이터를 자동으로 생성할 때 다른 것들과 구분할 수 있는 식별자를 요구합니다.
        // 아래와 같이 key 값을 넣어주도록 합니다.
        lists.push(<li key={data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);
        i = i + 1;
      }
      return(
        <nav>
            <ul>
              {lists} // 데이터 출력
            </ul>
        </nav> 
      );
    }
  }

  export default TOC;

 

---

 

 

 

# Each child in a list shoul have a unipue "key" prop.

 

이 때 주의할 점은 리액트에서는 여러개의 엘리먼트를 자동으로 생성할 때 생성되는 앨리먼트를 다른 것들과 구분할 수 있도록 식별자(key)를 요구합니다.

 

리액트 내부적으로 필요로 하기 때문에 요청하는 것이기 때문에 여러개의 데이터를 자동으로 생성할 때 유의하시기 바랍니다.

2021.03.29 - [Web/React 리액트] - [React 리액트] Each child in a list shoul have a unipue "key" prop 오류 해결 방법

[React 리액트] Each child in a list shoul have a unipue "key" prop 오류 해결 방법