3.3 React 기초 및 실습: 컴포넌트 분할 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

css는 깃허브 참고 https://github.com/katf101/React-The_Complete_Guide

---

1. 컴포넌트 분할

컴포넌트를 분할하면 코드가 짧아져 가독성이 좋아지고 유지보수가 수월해진다. 

Date 컴포넌트 분할

ExpenseItem 컴포넌트의 date관련 상수와 div 태그를 잘라내고 ExpenseDate 컴포넌트를 새로 만들어 잘라낸 코드를 붙여 넣었다. 

import "./ExpenseDate.css";

const ExpenseDate = (props) => {
  const month = props.date.toLocaleDateString("en-US", { month: "long" });
  const day = props.date.toLocaleDateString("en-US", { day: "2-digit" }); // 2-digit은 day를 2자리로 추출
  const year = props.date.getFullYear(); // getFullYear은 Year을 4자리로 추출

  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;

# 컴포넌트화 된 date관련 코드들
# ExpenseDate.js

ExpenseItem 컴포넌트에서 import로 ExpenseDate 컴포넌트를 받아와 잘라낸 div 태그가있던 위치에

ExpenseDate 컴포넌트를 넣어준다.

import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate.js"; // ExpenseDate import하기

const ExpenseItem = (props) => {
  return (
    <div className="expense-item">
      <ExpenseDate /> // 받아온 컴포넌트
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        {console.log(props["title"])}
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
};

export default ExpenseItem;

# ExpenseItem.js

---

2. 분할한 컴포넌트 props 전달하기

컴포넌트 분할에는 성공했지만 로컬호스트 3000으로 접속해보면 콘솔에 출력되는 에러와 함께 렌더가 안되는걸 확인할 수 있다.  이를 해결하기 위해서는 부모 컴포넌트에서 자식컴포넌트로 props를 전달 해야하는데, 부모 컴포넌트인 Item컴포넌트에서 자식컴포넌트인 Date 컴포넌트로 props를 전달하지 않았기 때문이다. 

부모 컴포넌트에서 자식 컴포넌트로 데이터 전달

import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate.js";

const ExpenseItem = (props) => {
  return (
    <div className="expense-item">
      <ExpenseDate date={props.date} /> // 컴포넌트 전달
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        {console.log(props["title"])}
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
};

export default ExpenseItem;

# ExpenseItem.js

 

컴포넌트를 전달 후 로컬호스트 3000을 확인하면 에러없이 잘 렌더된 화면을 볼 수 있다.

---

4. App.js의 ExpenseItem 컴포넌트 분할

4개의 비용이 들어가는 ExpenseItem컴포넌트를 Expenses 라는 컴포넌트를 생성해 다시 분할해준다. 

주의할 점은 기존의 컴포넌트의 import를 삭제후 새로운 컴포넌트를 import해주어야 한다.

import "./App.css";
import Expenses from "./components/Expenses"; // 삭제후 새 컴포넌트 입력

function App() {
  const expenses = [
    {
      id: "e1",
      title: "Toilet Paper",
      amount: 94.12,
      date: new Date(2020, 7, 14),
    },
    {
      id: "e2",
      title: "New TV",
      amount: 799.49,
      date: new Date(2021, 2, 12),
    },
    {
      id: "e3",
      title: "Car Insurance",
      amount: 294.67,
      date: new Date(2021, 2, 28),
    },
    {
      id: "e4",
      title: "New Desk (Wooden)",
      amount: 450,
      date: new Date(2021, 5, 12),
    },
  ];

  return (
    <div className="App">
      <h2>Let's get started!</h2>
      <Expenses items={expenses} />
    </div>
  );
}

export default App;

# App.js

Expenses 컴포넌트도 ExpenseItem 컴포넌트를 import해주어야 한다.

 

import "./Expenses.css";
import ExpenseItem from "./Expenseltem";

const Expenses = (props) => {
  return (
    <div className="expenses">
      <ExpenseItem
        title={props.items[0].title}
        amount={props.items[0].amount}
        date={props.items[0].date}
      />
      <ExpenseItem
        title={props.items[1].title}
        amount={props.items[1].amount}
        date={props.items[1].date}
      />
      <ExpenseItem
        title={props.items[2].title}
        amount={props.items[2].amount}
        date={props.items[2].date}
      />
      <ExpenseItem
        title={props.items[3].title}
        amount={props.items[3].amount}
        date={props.items[3].date}
      />
    </div>
  );
};

export default Expenses;

# Expenses.js