40. 컴포넌트를 여러 컴포넌트로 분할하기

 

 

 

우리는 App.js에서 ExpenseItem.js 파일을 출력했고 
거기서 ExpenseData.js로 속성들을 하나 씩 전달했다.

리액트에서는 작은 컴포넌트 단위로 만드는 것이 중요하고 하나의 파일에 하나의 기능에 집중하는 것이 중요하다

 

import './ExpenseDate.css';

function ExpenseDate(props) {

  const month = props.date.toLocaleString('en-US', { month: 'long' });
  const year = props.date.getYear() + 1900;
  const day = props.date.getDate();

  return <div className="expense-date">
    <div className="expense-date__month">{month}</div>
    <div className="expense-date__year">{year}</div>
    <div className="expense-date__day">{day}</div>
  </div>
}

export default ExpenseDate;

 

ExpenseDate.css 파일도 선생님 파일 그대로 복사

.expense-date {
  display: flex;
  flex-direction: column;
  width: 5.5rem;
  height: 5.5rem;
  border: 1px solid #ececec;
  background-color: #2a2a2a;
  color: white;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}

.expense-date__month {
  font-size: 0.75rem;
  font-weight: bold;
}

.expense-date__year {
  font-size: 0.75rem;
}

.expense-date__day {
  font-size: 1.5rem;
  font-weight: bold;
}