ReactJS - 네sted Components: 초보자 가이드

안녕하세요, 미래의 React 마법사 여러분! 오늘 우리는 ReactJS의 네sted components 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 저는 당신의 친절한 안내자가 되어 단계별로 설명해 드릴 것입니다. 이 튜토리얼의 끝을 맺을 때, 당신은 프로처럼 components를 넣을 수 있을 것입니다!

Nested Components는 무엇인가요?

들어가기 전에 nested components가 무엇인지 이해해 보겠습니다. 상상해 보세요, 당신이 집(React 앱)을 짓고 있다면. 벽, 지붕, 기초는 주요 components입니다. 하지만 집 안에는 방(nested components)이 있어 가구(더 많은 nested components)를 담을 수 있습니다. 이 구조는 복잡한 UI를 관리 가능한 방식으로 만들어 줍니다.

Nested Components를 사용하는 이유는 무엇인가요?

1. 재사용성: 한 번 만들어 두면 여러 번 사용할 수 있습니다.
2. 유지보수성: 더 작고 집중된 components를 업데이트하고 관리하기 쉽습니다.
3. 가독성: 코드가 더 정리되고 이해하기 쉬워집니다.

이제 코드로 손을 더해 보겠습니다!

첫 번째 Nested Component 만들기

간단한 예제로 시작해 보겠습니다. 상상해 보세요, 우리는 쇼핑 앱을 만들고 있습니다. Product component를 만들어 Price component를 포함시킬 것입니다.

// Product.js
import React from 'react';
import Price from './Price';

function Product({ name, price }) {
return (
<div className="product">
<h2>{name}</h2>
<Price amount={price} />
</div>
);
}

export default Product;

// Price.js
import React from 'react';

function Price({ amount }) {
return <p className="price">${amount.toFixed(2)}</p>;
}

export default Price;

이 예제에서, Product은 부모 component이고 Price는 그 안에 포함되어 있습니다. 이를 다음과 같이 설명할 수 있습니다:

1. Product에 Price component를导입합니다.
2. Product component는 name과 price를 props로 받습니다.
3. Product 내에 Price component를 사용하여 price prop을 amount로 전달합니다.

이제 Product component를 사용할 때:

<Product name="Super Cool Gadget" price={19.99} />

다음과 같이 렌더링됩니다:

<div class="product">
<h2>Super Cool Gadget</h2>
<p class="price">$19.99</p>
</div>

이게 멋지지 않나요? 우리는 어떤 제품에도 사용할 수 있는 재사용 가능한 가격 표시를 만들었습니다!

FormattedMoney Component

이제 돈을 포맷ting하는 더 복잡한 nested component를 만들어 보겠습니다. 이는 다양한 화폐 단위로 가격을 표시하는 데 유용합니다.

// FormattedMoney.js
import React from 'react';

function FormattedMoney({ amount, currency = 'USD' }) {
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency,
});

return <span className="formatted-money">{formatter.format(amount)}</span>;
}

export default FormattedMoney;

// Product.js (업데이트)
import React from 'react';
import FormattedMoney from './FormattedMoney';

function Product({ name, price, currency }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
</div>
);
}

export default Product;

FormattedMoney에서 일어나고 있는 일을 설명해 보겠습니다:

1. Intl.NumberFormat API를 사용하여 숫자를 화폐로 포맷ting합니다.
2. 기본 화폐 단위를 'USD'로 설정합니다.
3. component는 포맷된 금액을 포함하는 span을 반환합니다.

이제 Product component를 다음과 같이 사용할 수 있습니다:

<Product name="Amazing Widget" price={29.99} currency="EUR" />

이는 다음과 같이 렌더링됩니다:

<div class="product">
<h2>Amazing Widget</h2>
<span class="formatted-money">€29.99</span>
</div>

좋지 않나요? 우리는 다양한 화폐 단위로 가격을 표시할 수 있는 유연하고 재사용 가능한 component를 만들었습니다!

FormattedDate Component

이제 포맷된 날짜를 표시하는 또 다른 nested component를 만들어 보겠습니다. 이는 제품 출시 날짜나 판매 종료 날짜를 표시하는 데 유용할 수 있습니다.

// FormattedDate.js
import React from 'react';

function FormattedDate({ date, format = 'long' }) {
const options = {
short: { month: 'short', day: 'numeric', year: 'numeric' },
long: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
};

const formatter = new Intl.DateTimeFormat('en-US', options[format]);

return <span className="formatted-date">{formatter.format(new Date(date))}</span>;
}

export default FormattedDate;

// Product.js (다시 업데이트)
import React from 'react';
import FormattedMoney from './FormattedMoney';
import FormattedDate from './FormattedDate';

function Product({ name, price, currency, releaseDate }) {
return (
<div className="product">
<h2>{name}</h2>
<FormattedMoney amount={price} currency={currency} />
<p>Release Date: <FormattedDate date={releaseDate} /></p>
</div>
);
}

export default Product;

FormattedDate component에서는 다음과 같은 일이 일어납니다:

1. 두 가지 포맷 옵션('short'과 'long')을 만듭니다.
2. Intl.DateTimeFormat을 사용하여 날짜를 포맷ting합니다.
3. 입력 날짜 문자열을 Date 객체로 변환합니다.

이제 업데이트된 Product component를 다음과 같이 사용할 수 있습니다:

<Product
name="Futuristic Gizmo"
price={99.99}
currency="USD"
releaseDate="2023-12-25"
/>

이는 다음과 같이 렌더링됩니다:

<div class="product">
<h2>Futuristic Gizmo</h2>
<span class="formatted-money">$99.99</span>
<p>Release Date: <span class="formatted-date">Monday, December 25, 2023</span></p>
</div>

좋지 않나요? 우리는 다양한 화폐 단위와 날짜를 표시할 수 있는 유연하고 재사용 가능한 component를 만들었습니다!

모든 것을 함께 모음

이제 모든 nested components를 사용하는 ProductList component를 만들어 보겠습니다:

// ProductList.js
import React from 'react';
import Product from './Product';

function ProductList({ products }) {
return (
<div className="product-list">
{products.map(product => (
<Product
key={product.id}
name={product.name}
price={product.price}
currency={product.currency}
releaseDate={product.releaseDate}
/>
))}
</div>
);
}

export default ProductList;

이제 ProductList를 다음과 같이 사용할 수 있습니다:

const products = [
{ id: 1, name: "Super Gadget", price: 49.99, currency: "USD", releaseDate: "2023-06-15" },
{ id: 2, name: "Mega Widget", price: 39.99, currency: "EUR", releaseDate: "2023-07-01" },
{ id: 3, name: "Awesome Gizmo", price: 59.99, currency: "GBP", releaseDate: "2023-08-30" },
];

<ProductList products={products} />

이는 제품 목록을 렌더링합니다!

결론

축하합니다! React의 nested components에 대해 배웠습니다. 우리는 돈과 날짜를 포맷ting하는 재사용 가능한 components를 만들었고, 제품 component 내에 이를 넣었습니다. 이것이 시작일 뿐 - nested components의 가능성은 무한합니다!

기억해 두세요, 연습이 완벽을 만듭니다. 자신만의 nested components를 만들어 보고 React 앱을 더 모듈화하고 유지보수 가능하게 만들어 보세요.

행복하게 코딩하세요, 미래의 React 마스터 여러분! ?

Component	목적	Props
FormattedMoney	포맷된 화폐 표시	amount, currency
FormattedDate	포맷된 날짜 표시	date, format
Product	제품 정보 표시	name, price, currency, releaseDate
ProductList	제품 목록 표시	products (배열)

Credits: Image by storyset