[Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법

728x90

SMALL

접근 (요약)

현재 개발중인 프로젝트에서 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 태그 추가 및 속성값 전달을 학습해봤습니다.

추가 질문을 댓글을 달아주시면 감사하겠습니다^^

오늘도 파이팅입니다!

728x90

LIST

저작자표시

'💻 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

EveryDay, EveryPyeon

[Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법

'💻 DEV > NextJS' 카테고리의 다른 글

댓글

티스토리툴바

[Next.js 13] 컴포넌트 생성 후, page에서 컴포넌트에 <HTML> 태그, 속성값 사용법

'💻 DEV > NextJS' 카테고리의 다른 글

관련글

댓글

티스토리툴바