접근 (요약)
현재 개발중인 프로젝트에서 Next.js 13버전과 TypeScript 를 기술스택으로 갖고, 구성요소마다 최대한 잘게 컴포넌트화를 목표로 하고 있습니다. (1) 컴포넌트(components)를 빼주고, 실제 화면을 보여주는 (2) page.tsx 파일에서 (1) 컴포넌트를 사용하면서도 (3) 해당 컴포넌트 내에 <html> 태그나 속성값을 주는 방법을 학습해보겠습니다.
1. (상황) 컴포넌트화 & page.tsx 생성
(1.1). 컴포넌트화 + 컴포넌트 사용을 위한 등록
(1.2). Page.tsx 생성 + 컴포넌트 가져오기
2. 컴포넌트에 속성 값 전달하기
(2.1). 컴포넌트 파일 준비하기 (interface, props)
(2.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기
3. 컴포넌트에 <HTML> 태그 전달하기
(3.1). 컴포넌트 파일 준비하기 (interface, props)
(3.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기
방법
1. (상황) 컴포넌트화 & page.tsx 생성
(1.1). 컴포넌트화 + 컴포넌트 사용을 위한 등록
- "컴포넌트.tsx" 파일을 작성하고
- 이를 전역적으로 export 해주기 위해서 개별적으로 만들어 둔 index.ts 파일 등에 등록을 해줍니다.
import 컴포넌트명 from './컴포넌트명';
export {
컴포넌트명,
}
(1.2). Page.tsx 생성 + 컴포넌트 가져오기
'use client';
import React from 'react';
import { 컴포넌트명 } from '@/components';
export default function 페이지명() {
return (
<div>
<div className="">
<div>
<컴포넌트명 />
</div>
</div>
</div>
);
}
2. 컴포넌트에 속성 값 전달하기
(2.1). 컴포넌트 파일 준비하기 (interface, props)
- 컴포넌트에 속성을 전달하려면 해당 컴포넌트에서 props를 사용하여 속성을 받아올 수 있습니다.
- 예를 들어, 제목을 속성으로 받는다고 가정하면 다음과 같이 코드를 수정할 수 있습니다
// 컴포넌트명.tsx
import React from 'react';
interface 컴포넌트명Props {
title: string; // title 속성을 문자열로 받음
}
function 컴포넌트명({ title }: 컴포넌트명Props) {
return (
<div>
<div className="">{title}</div>
</div>
);
}
export default 컴포넌트명;
(2.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기
- 컴포넌트를 사용할 때 속성 title을 전달합니다.
// page.tsx
import React from 'react';
import { 컴포넌트명 } from '@/components';
export default function Page() {
return (
<div>
<div className="~~~">
<div>
{/* title 속성을 전달 */}
<컴포넌트명 title="OOOOO" />
</div>
</div>
</div>
);
}3. 컴포넌트에 <HTML> 태그 전달하기
(3.1). 컴포넌트 파일 준비하기 (interface, props + children)
// 컴포넌트.tsx
'use client';
import React from 'react';
interface 컴포넌트명Props {
children: React.ReactNode; // 컴포넌트 내부의 자식 요소를 받음
}
function PageTitle({ children }: 컴포넌트명Props) {
return (
<div>
<div className="~~~">{children}</div>
</div>
);
}
export default 컴포넌트명;
(3.2). page.tsx( 컴포넌트를 사용할) 파일 준비하기
'use client';
import React from 'react';
import { 컴포넌트명 } from '@/components';
export default function 페이지명() {
return (
<div>
<div className="~~~">
<div>
<컴포넌트명>
★1. 단순한 문자열 작성 가능 : Page 입니다.
★2. <a></a>, <p></p> 등 HTML 태그 작성 가능
</컴포넌트명>
</div>
</div>
</div>
);
}
이상으로, NextJS 내 TailwindCSS 사용시 컴포넌트에 HTML 태그 추가 및 속성값 전달을 학습해봤습니다.
추가 질문을 댓글을 달아주시면 감사하겠습니다^^
오늘도 파이팅입니다!
'DEV > NextJS' 카테고리의 다른 글
| [NEXT.js 14] 2. loading.js & Suspense & streamed Response (세분화 로딩상태 관리) (0) | 2024.06.14 |
|---|---|
| [NEXT.js 14] 1. Image 태그 관련 <Image> (0) | 2024.06.11 |
| [Next.js 13] tailwind css Plugin 작성 & 적용 (0) | 2023.09.27 |
| [Nextjs] 초기 설치 & 세팅 (Installation) (0) | 2023.06.01 |
| [NextJS] EsLint Delete `␍` eslint (prettier/prettier) 에러 해결하기 (0) | 2023.03.09 |
댓글