[React] - 6차 - props 반복 학습

1. JS

import './App.css';

import { useState, useEffect } from 'react';

import Data from './components/Data'; // 디렉토리 구조

function App() {

  const data = [

    { title: '이름1', year: 1000 },

    { title: '이름2', year: 2000 },

    { title: '이름3', year: 3000 },

    { title: '이름4', year: 4000 },

  ];

  const renderData = data.map(adata => {

    return (

      <Data data={ adata } key={ adata.title } />

    );

  });

  return (

    <div className="App">

      { renderData }

    </div>

  );

}

export default App;

---

2. JS

import React from "react";

const Data = ({ data }) => { // props 였는데 { }로 원하는 부분만 빼오는게 가능

    return (

        <div className="data">

            <div className='data-title'>{data.title}</div>

            <div className='data-year'>{data.year}</div>

        </div>

    );

}

export default Data;

---

3. CSS

 

.data {

  display: flex;

  align-items: center;

  border: 1px solid gray;

  border-radius: 5px;

  padding: 10px;

  margin-bottom: 5px;

}

.data-title {

  flex-grow: 1;

}

.data-year {

  font-size: 10px;

  color: red;

}

---

 

 

map함수 사용할 때 자식에게 고유 키값을 줘야한다