CustomComponent

---

소스코드

• App.js

import './App.css';
import { useState } from 'react';

function App() {
  let [subTitle, b] = useState([
    '여자 코드 추천',
    '남자 코트 추천',
    '남자 야구잠바 추천',
  ]);

  function copySubTitle() {
    //clone
    let copy = [...subTitle];
  }

  return (
    <div className="App">
      <ListItem subtitle={subTitle[0]} datestr="2월 17일 발행"></ListItem>
      <ListItem subtitle={subTitle[1]} datestr="2월 17일 발행"></ListItem>
      <ListItem subtitle={subTitle[2]} datestr="2월 17일 발행"></ListItem>
    </div>
  );
}

function ListItem(props) {
  return (
    <div className="list-item">
      <h4>{props.subtitle}</h4>
      <p>{props.datestr}</p>
    </div>
  );
}

• App.css

div {
  box-sizing: border-box;
}
.list-item {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}

---

연결문서