ckim의 개인 블로그입니다.

catui 사용방법

안녕하세요, ckim입니다! 오늘은 간단하고 효율적인 UI 라이브러리인 catui에 대해 알아보려고 합니다. catui는 특히 React 기반의 프로젝트에서 사용하기 좋으며, 직관적인 API와 다양한 컴포넌트를 제공합니다. 이번 포스트에서는 catui의 설치 방법과 기본적인 사용법을 살펴보겠습니다.

catui 설치하기

catui를 사용하기 위해서는 먼저 npm 또는 yarn을 통해 라이브러리를 설치해야 합니다. 아래 명령어를 터미널에 입력하세요.

npm install catui

또는 yarn을 사용하는 경우:

yarn add catui

기본 사용법

catui의 기본 구성 요소는 다음과 같습니다:

  • Button
  • Input
  • Card

    • 각각의 컴포넌트는 쉽게 사용할 수 있으며, 아래 예제를 통해 살펴보겠습니다.

    Button 컴포넌트 사용하기

    catui에서 버튼을 사용하는 방법은 아주 간단합니다. 아래 코드를 참고하세요.

    import React from 'react';
import { Button } from 'catui';

const App = () => {
  return (
    <div>
      <Button onClick={() => alert('버튼 클릭!')}>
        클릭하세요
      </Button>
    </div>
  );
};

export default App;

    위의 코드는 '클릭하세요'라는 텍스트가 있는 버튼을 생성합니다. 버튼을 클릭하면 '버튼 클릭!'이라는 알림창이 나타납니다.

    Input 컴포넌트 사용하기

    입력 필드를 추가하고 싶다면 Input 컴포넌트를 사용할 수 있습니다. 아래 예제를 확인해 보세요.

    import React, { useState } from 'react';
import { Input } from 'catui';

const App = () => {
  const [value, setValue] = useState('');

  return (
    <div>
      <Input 
        value={value} 
        onChange={(e) => setValue(e.target.value)} 
        placeholder="여기에 입력하세요" 
      />
      <p>입력한 내용: {value}</p>
    </div>
  );
};

export default App;

    위 코드에서는 사용자가 입력한 내용을 실시간으로 보여줍니다. useState를 사용하여 상태를 관리하고, onChange 이벤트로 입력값을 업데이트합니다.

    Card 컴포넌트 사용하기

    마지막으로 Card 컴포넌트를 사용하여 정보를 표시해 보겠습니다.

    import React from 'react';
import { Card } from 'catui';

const App = () => {
  return (
    <div>
      <Card title="제목" content="여기에 내용이 들어갑니다." />
    </div>
  );
};

export default App;

    Card 컴포넌트는 기본적으로 제목과 내용을 표시할 수 있으며, 다양한 스타일을 적용할 수 있습니다.

    catui 스타일 커스터마이징

    catui는 기본 스타일 외에도 각종 프로퍼티를 통해 사용자 정의 스타일을 적용할 수 있습니다. 예를 들어, 버튼의 색상을 변경하고 싶다면 다음과 같이 할 수 있습니다.

    <Button color="primary">프라이머리 버튼</Button>
<Button color="secondary">세컨더리 버튼</Button>

    유용한 팁

  • catui의 공식 문서를 참고하여 더 많은 컴포넌트와 옵션을 확인하세요.
  • 복잡한 UI를 구성할 때는 컴포넌트를 적절하게 조합하여 사용하세요. 예를 들어, 여러 개의 Input과 Button을 조합하여 폼을 만들 수 있습니다.

마무리

오늘은 catui의 설치와 기본적인 사용법을 알아보았습니다. 간단한 버튼, 입력 필드, 카드 컴포넌트를 통해 UI를 구성하는 방법을 배웠는데요. catui는 직관적이고 사용하기 쉬운 UI 라이브러리이므로, 여러분의 프로젝트에 쉽게 통합할 수 있습니다. 추가적인 기능이나 스타일링 옵션은 공식 문서를 통해 확인해 보세요. 다음 포스트에서 또 만나요!