PrimeReact 소개 및 활용 가이드

PrimeReact 소개 및 활용 가이드

PrimeReact는 다양한 고품질 UI 컴포넌트를 제공하는 React용 UI 라이브러리로, 빠르고 효율적인 개발을 지원합니다. 특히 비즈니스 애플리케이션 개발에서 많이 사용되는 구성 요소를 포함하고 있어 생산성을 높이는 데 큰 도움이 됩니다. 아래에서는 PrimeReact의 주요 장점과 활용 방법을 설명합니다.

 

사실 저는 NextJS에서 사용하려고 합니다. Tailwind 기반의 UI 라이브러리나 여러 CSS 프레임워크를 지원하는 라이브러리를 찾다가 여기까지왔기에 더 이상의 대안이 없는 상황입니다. 사실 MUI가 큰 경쟁자였지만... 커스터마이즈에 대한 불편함이 있는데 PrimeReact는 어떨지는 사용해 보면서 확인해 봐야겠죠.

 

PrimeReact의 주요 장점

1. 다양한 컴포넌트
   • PrimeReact는 100개 이상의 풍부한 컴포넌트를 제공합니다. 버튼, 입력 폼, 테이블, 차트, 캘린더 등 흔히 사용되는 UI 요소들이 포함되어 있어 별도의 추가 구현 없이 사용할 수 있습니다.
2. 테마 및 커스터마이징
   • PrimeReact는 여러 가지 테마를 기본 제공하며, 사용자가 손쉽게 테마를 변경하거나 자신만의 테마를 정의할 수 있습니다.
3. 접근성(Accessibility)
   • WCAG 준수로 접근성을 보장하며, ARIA 속성을 지원하여 다양한 사용자에게 친화적인 UI를 제공합니다.
4. 반응형 디자인
   • 모바일, 태블릿, 데스크톱 등 다양한 기기에서 최적화된 UI를 제공하여 유연한 레이아웃 구성이 가능합니다.
5. 강력한 커뮤니티와 지원
   • PrimeReact는 활발한 개발자 커뮤니티와 공식 문서를 통해 높은 수준의 지원을 받을 수 있습니다.
6. 오픈소스 및 상용 라이선스
   • 오픈소스 라이브러리이지만 상용 프로젝트에서도 사용할 수 있는 라이선스 옵션을 제공합니다.

---

PrimeReact 설치 및 기본 사용법

1. 설치

# npm
npm install primereact primeicons

# yarn
yarn add primereact primeicons

2. CSS 추가

PrimeReact를 사용하려면 테마와 기본 CSS 파일을 프로젝트에 포함해야 합니다.

import 'primereact/resources/themes/saga-blue/theme.css';  // 테마 CSS
import 'primereact/resources/primereact.min.css';         // PrimeReact 기본 스타일
import 'primeicons/primeicons.css';                      // 아이콘

3. 기본 컴포넌트 사용 예제

아래는 PrimeReact의 버튼(Button) 컴포넌트를 사용하는 간단한 예제입니다:

import React from 'react';
import { Button } from 'primereact/button';

const App = () => {
    return (
        <div>
            <h1>PrimeReact 버튼 데모</h1>
            <Button label="클릭하세요" icon="pi pi-check" />
        </div>
    );
};

export default App;

---

PrimeReact의 인기 컴포넌트

1. DataTable
   • 대량의 데이터를 효과적으로 표시하고 관리할 수 있는 강력한 테이블 컴포넌트.

   import React, { useState, useEffect } from 'react';
   import { DataTable } from 'primereact/datatable';
   import { Column } from 'primereact/column';
   
   const DataTableDemo = () => {
       const [products, setProducts] = useState([]);
   
       useEffect(() => {
           fetch('https://fakestoreapi.com/products')
               .then((res) => res.json())
               .then((data) => setProducts(data));
       }, []);
   
       return (
           
               
               
               
           
       );
   };
   
   export default DataTableDemo;

2. Dialog
   • 모달 창을 손쉽게 구현할 수 있는 컴포넌트.

   import React, { useState } from 'react';
   import { Dialog } from 'primereact/dialog';
   import { Button } from 'primereact/button';
   
   const DialogDemo = () => {
       const [visible, setVisible] = useState(false);
   
       return (
           <div>
               <Button label="모달 열기" onClick={() => setVisible(true)} />
               <Dialog header="모달 제목" visible={visible} onHide={() => setVisible(false)}>
                   <p>PrimeReact로 만든 모달입니다!</p>
               </Dialog>
           </div>
       );
   };
   
   export default DialogDemo;

---

PrimeReact와 Next.js의 통합

Next.js는 서버사이드 렌더링(SSR)을 지원하기 때문에 SEO와 성능 최적화에 강점이 있습니다. PrimeReact를 Next.js 프로젝트에 통합하면 더욱 강력한 웹 애플리케이션을 개발할 수 있습니다.

1. 글로벌 스타일 추가

Next.js 프로젝트에서는 CSS 파일을 _app.js 또는 _app.tsx에서 로드합니다.

import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

export default MyApp;

2. SSR 설정

PrimeReact의 일부 컴포넌트는 브라우저 환경에서만 동작하므로, SSR 시 이를 고려해야 합니다. 이를 위해 dynamic을 활용하여 컴포넌트를 동적으로 불러올 수 있습니다.

import dynamic from 'next/dynamic';

const Button = dynamic(() => import('primereact/button'), { ssr: false });

const Home = () => {
    return <Button label="Next.js와 함께!" />;
};

export default Home;

---

Tailwind CSS 적용 방법

Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 클래스 이름을 조합하여 빠르고 효율적으로 스타일링할 수 있습니다. PrimeReact와 함께 사용하면 더욱 유연한 디자인 구성이 가능합니다.

1. 설치

# npm
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

# yarn
yarn add -D tailwindcss postcss autoprefixer
yarn tailwindcss init

2. Tailwind 설정

tailwind.config.js 파일을 열고 다음과 같이 수정하여 Tailwind가 적용될 파일 경로를 지정합니다:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/primereact/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

3. 글로벌 CSS에 Tailwind 추가

globals.css 또는 프로젝트의 메인 CSS 파일에 Tailwind의 기본 스타일을 추가합니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Styled 방식과 Unstyled 방식의 사용

PrimeReact는 기본적으로 스타일이 적용된(Styled) 컴포넌트를 제공하지만, Tailwind CSS와의 통합을 위해 Unstyled 방식을 사용할 수도 있습니다. 이 두 가지 방식을 비교하여 설명합니다.

Styled 방식

• PrimeReact가 제공하는 기본 스타일을 사용하는 방식입니다.
• 테마 파일을 임포트하면 바로 사용할 수 있습니다.
• 추가적인 스타일링 없이도 완성된 UI를 빠르게 구현할 수 있습니다.

Styled 방식 사용 예제:

import React from 'react';
import { Button } from 'primereact/button';

const App = () => {
    return (
        <div>
            <Button label="Styled 버튼" className="p-button-success" />
        </div>
    );
};

export default App;

Unstyled 방식

• PrimeReact의 컴포넌트 구조만 활용하고 스타일링은 Tailwind CSS로 처리하는 방식입니다.
• 테마 파일을 임포트하지 않아도 됩니다.
• 디자인 커스터마이징이 자유롭고, Tailwind CSS의 유틸리티 클래스를 최대한 활용할 수 있습니다.

Unstyled 방식 사용 예제:

import React from 'react';
import { Button } from 'primereact/button';

const App = () => {
    return (
        <div className="p-6 bg-gray-100 flex justify-center items-center min-h-screen">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Unstyled 버튼
            </button>
        </div>
    );
};

export default App;

주요 차이점

특징Styled 방식Unstyled 방식

스타일 적용	PrimeReact의 기본 스타일	Tailwind CSS로 사용자 정의
테마 적용 가능 여부	가능	불가능
사용 용이성	간편하게 사용 가능	직접 스타일링 필요
커스터마이징	제한적 (

PrimeReact 공식 자료

PrimeReact에 대한 더 많은 정보는 아래 공식 문서를 참고하세요:

• PrimeReact 공식 홈페이지
• PrimeReact GitHub 저장소

---

PrimeReact를 활용하여 더 나은 UI를 설계하고, 개발 생산성을 극대화하세요! 🚀

 

 

아... 마지막으로 개발자들이 제일 원하는건 디자인에 대한 부담을 덜고 화면 구성이 되어있는 어드민 패널이 제공되면 더욱더 좋겠지요?

 

해당 라이브러리도 Admin Templates을 여러개 제공하지만 역시나 다른 여녁들 처럼 유료입니다. 다만, 무료로 제공하는 녀셕이 강력 하다는게 장점으로 다가오는데 유료와 맞먹는 구성을 제공합니다.

 

UI 라이브러리 자체는 완전한 오픈소스이다보니 그런거 아닌가 싶기도하고 템플릿 만든 제작사에서 통크게 오픈한건지 모르겠지만

일단 디자인쪽에 어려움을 껵는 개발자로써는 너무나 환영할만한 부분입니다.

 

해당 템플릿의 설명을 보면 아래와 같습니다.

Sakai is a free application template for React based on the popular Next.js framework with new App Router.

요즘 만들고있는 구성과 동입합니다. 그대로 사용하는데 부담이 없네요 ㅎㅎ

 

데모: https://sakai.primereact.org

https://sakai.primereact.org

 

소스: https://github.com/primefaces/sakai-react

GitHub - primefaces/sakai-react: Free React Admin Template

 

Next 버전이 13이지만 14로 올리고 사용해 봐도 아주잘 됩니다.

 

한동안은 이걸로만 달려보려합니다. ㅋ