브로스 데이터바인딩 합니다.
const bros = [
{
id: 0,
name: "Jane Doe",
summary: "Lorem ipsum dolor sit amet, consectetur ",
follow: "Unfollow",
},
{
id: 1,
name: "John Smith",
summary: "Sed do eiusmod tempor incididunt ",
follow: "Unfollow",
},
{
id: 2,
name: "Alice Johnson",
summary: "Ut enim ad minim veniam, quis nostrud exercitation ",
follow: "Follow",
},
{
id: 3,
name: "Bob Williams",
summary: "Duis aute irure dolor in reprehenderit ",
follow: "Unfollow",
},
{
id: 4,
name: "Charlie Brown",
summary: "Excepteur sint occaecat ",
follow: "Follow",
},
{
id: 5,
name: "Diana Prince",
summary: "Mollit anim id est laborum. Nam libero",
follow: "Unfollow",
},
{
id: 6,
name: "Edward Cullen",
summary: "Quam nihil impedit quo ",
follow: "Follow",
},
{
id: 7,
name: "Fiona Gallagher",
summary: "Omnis voluptas assumenda est, omnis ",
follow: "Unfollow",
},
{
id: 8,
name: "George Weasley",
summary: "Temporibus autem quibusdam ",
follow: "Follow",
},
{
id: 9,
name: "Hermione Granger",
summary: "Earum rerum hic tenetur a sapiente delectus",
follow: "Unfollow",
},
{
id: 10,
name: "Isaac Newton",
summary: "Repudiandae sint et molestiae non ",
follow: "Follow",
},
{
id: 11,
name: "Jack Sparrow",
summary: "Necessitatibus saepe eveniet ut et voluptates",
follow: "Unfollow",
},
];
export default bros;
data/dataBros.tsx
SNS 대표 기능중 하나인 팔로우 리스트 유아이을 만들어 보겠습니다.
그러기 위해 데이터가 필요합니다.
이 데이터는 어레이를 작성하는 것으로 대신 하겠습니다.
그런데 앞으로 데이터는 디렉토리를 따로 관리하는 것이 좋겠습니다.
루트에 디렉토리 빌딩하고 bros data 빌딩 합니다.
import dataBross from '../data/dataBros';
/bros/page.tsx
데이터브로스 임포트 합니다.
interface BroItem {
id: number;
name: string;
summary: string;
follow: string;
}
interface BroProps {
items: BroItem[];
}
const typedDataBross = dataBross as BroItem[];
인터페이스 데이터텍스트 아래에 추가 합니다.
브로아이템 인터페이스를 데퍼니션 합니다.
데이터브로스스 데이터타입을 세팅 합니다.
현재 브로스컴포넌트는 브로컴포넌트를 자식으로 가지고 있습니다.
자식이 부모 데이터를 사용하려면 프롭스로 받아야 합니다.
그러기 위해 브로프롭스 인터페이스를 데퍼니션 합니다.
브로아이템 데이터타입이 어레이임을 보증합니다.
이 보증을 아이템스로 세팅 합니다.
즉, 이 인터페이스는 자식컴포넌트가 프롭스로 사용할 것입니다.
데이터브로스스 데이터를 임포트 했습니다.
데이터브로스스가 데이터 타입 체크 받은 안전한 데이터인지 체크해야 합니다.
브로아이템 인터페이스는 위에서 데이터타입 체크를 끝냈습니다.
데이터브로스스는 브로아이템으로 사용할 것임을 알립니다.
이것은 일종의 보증서 발급이라고 생각하면 편합니다.
이 보증서는 부모컴포가 자식컴포한테 프롭스 할 때 사용할 것입니다.
// 데이터 요소 타입 정의
interface BroItem {
id: number;
name: string;
summary: string;
follow: string;
}
// 컴포넌트 Props 타입 정의
// 이제 Bro 컴포넌트는 'items'라는 키로 BroItem 배열을 받습니다.
interface BroProps {
items: BroItem[];
}
// 타입 단언 (dataBross가 BroItem[] 구조임을 명시)
const typedDataBross = dataBross as BroItem[]; <Bro items={typedDataBross} />
데이터를 자식에 프롭스 합니다.
{/* BroProps에 맞게 'items'라는 키로 배열을 전달 */}
<Bro items={typedDataBross} />function Bro({ items }: BroProps) {
return (
<ol className="list-group list-group-numbered m-3">
{items.map((item) => (
<li
key={item.id}
className="list-group-item d-flex justify-content-between align-items-start"
>
<div className="ms-2 me-auto">
<div className="fw-bold">{item.name}</div>
<small className="text-body-tertiary">{item.summary}</small>
</div>
<span
className={`badge rounded-pill ${
item.follow === 'Follow' ? 'text-bg-success' : 'text-bg-primary'
}`}
>
<small>{item.follow}</small>
</span>
</li>
))}
</ol>
);
}
브로프롭스 인터페이스를 사용하여 아이템스를 프롭스 합니다.
부모컴포는 <Bro items={typedDataBross} /> 이렇게 데이터를 전달하고
자식컴포는 function Bro({items}: BroProps) 이렇게 데이터를 받습니다.
논리적으로 생각하지 말고 그냥 마음으로 받아 들입니다.
맵 반복문 돌리고 데이터 바인딩 합니다.
데이터 체크하고 터너리 오퍼레이터로 팔로/언팔 상태를 지정 합니다.
className={` `}
클래스네임은 브레이스/빽틱 조합으로 사용 합니다.
즉, 데이터가 Follow 라면
<span className={`badge rounded-pill text-bg-success`}>
폴스라면
<span className={`badge rounded-pill text-bg-primary`}>
태그가 이렇게 변경 됩니다.
// Bro 컴포넌트 정의 수정 (props 디스트럭처링)
function Bro({ items }: BroProps) {
return (
<ol className="list-group list-group-numbered">
{/* props.bros 대신 items를 직접 사용 */}
{items.map((item) => (
<li
key={item.id}
className="list-group-item d-flex justify-content-between align-items-start"
>
<div className="ms-2 me-auto">
<div className="fw-bold">{item.name}</div>
<small className="text-body-tertiary">{item.summary}</small>
</div>
{/* follow 필드의 값에 따라 버튼 스타일을 동적으로 변경할 수 있습니다. */}
<span className={`badge rounded-pill ${item.follow === 'Follow' ? 'text-bg-success' : 'text-bg-primary'}`}>
<small>{item.follow}</small>
</span>
</li>
))}
</ol>
);
}test
데이터 체크 합니다.
Completion
'use client';
import 'bootstrap/dist/css/bootstrap.min.css';
import dataTexts from '../data/dataText';
import dataBross from '../data/dataBros';
interface DataText {
main: string;
subCaps1: string;
sub1: string;
subCaps2: string;
sub2: string;
subCaps3: string;
sub3: string;
footer: string;
}
interface BroItem {
id: number;
name: string;
summary: string;
follow: string;
}
interface BroProps {
items: BroItem[];
}
const typedDataBross = dataBross as BroItem[];
export default function Bros() {
return (
<div>
<h4>{dataTexts[0].subCaps1}</h4>
<Bro items={typedDataBross} />
<Pagination />
</div>
);
}
function Bro({ items }: BroProps) {
return (
<ol className="list-group list-group-numbered m-3">
{items.map((item) => (
<li
key={item.id}
className="list-group-item d-flex justify-content-between align-items-start"
>
<div className="ms-2 me-auto">
<div className="fw-bold">{item.name}</div>
<small className="text-body-tertiary">{item.summary}</small>
</div>
<span
className={`badge rounded-pill ${
item.follow === 'Follow' ? 'text-bg-success' : 'text-bg-primary'
}`}
>
<small>{item.follow}</small>
</span>
</li>
))}
</ol>
);
}
function Pagination() {
return (
<nav aria-label="Page navigation example">
<ul className="pagination justify-content-center m-3">
<li className="page-item disabled">
<a className="page-link">Previous</a>
</li>
<li className="page-item">
<a className="page-link" href="#">
1
</a>
</li>
<li className="page-item">
<a className="page-link" href="#">
2
</a>
</li>
<li className="page-item">
<a className="page-link" href="#">
3
</a>
</li>
<li className="page-item">
<a className="page-link" href="#">
Next
</a>
</li>
</ul>
</nav>
);
}