별점 평가

별점 평가 (Rate)

별점을 이용해 어떤 대상에 대한 평가를 보여주거나 빠르게 남길 수 있는 컴포넌트입니다. 옆에서 설명하듯이, 단순한 별점부터 커스텀 캐릭터까지 폭넓게 활용할 수 있어요.

출처: 문서

본문

언제 사용하나요 (When To Use)

• 평가(evaluation)를 보여줄 때
• 어떤 대상에 대해 빠르게 평가를 남길 때

예제 (Examples)

기본 (Basic)

가장 간단한 사용법입니다.

import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => <Rate />;

export default App;

크기 (Sizes)

세 가지 크기를 지원합니다.

import React from 'react';
import { Flex, Rate } from 'antd';

const App: React.FC = () => (
  <Flex vertical gap="medium">
    <Rate size="large" />
    <Rate />
    <Rate size="small" />
  </Flex>
);

export default App;

별 반 개 (Half star)

별 반 개 선택을 지원합니다.

import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => <Rate allowHalf defaultValue={2.5} />;

export default App;

설명 문구 표시 (Show copywriting)

Rate 컴포넌트에 설명 문구를 추가할 수 있습니다.

import React, { useState } from 'react';
import { Flex, Rate } from 'antd';
import type { RateProps } from 'antd';

const desc: RateProps['tooltips'] = [
  'terrible',
  { placement: 'top', title: 'bad', trigger: 'hover' },
  'normal',
  'good',
  'wonderful',
];

function getDescTitle(value: number, desc: RateProps['tooltips']) {
  const item = desc?.[value - 1];
  return item && typeof item === 'object' ? item.title : item;
}

const App: React.FC = () => {
  const [value, setValue] = useState(3);
  return (
    <Flex gap="medium" vertical>
      <Rate tooltips={desc} onChange={setValue} value={value} />
      {value ? <span>{getDescTitle(value, desc) as React.ReactNode}</span> : null}
    </Flex>
  );
};

export default App;

읽기 전용 (Read only)

읽기 전용으로, 마우스로 상호작용할 수 없습니다.

import React from 'react';
import { Rate } from 'antd';

const App: React.FC = () => <Rate disabled defaultValue={2} />;

export default App;

별점 지우기 (Clear star)

클릭했던 별을 다시 클릭하면 별점을 지울 수 있게 해줍니다.

import React from 'react';
import { Flex, Rate } from 'antd';

const App: React.FC = () => (
  <Flex gap="medium" vertical>
    <Flex gap="medium">
      <Rate defaultValue={3} />
      <span>allowClear: true</span>
    </Flex>
    <Flex gap="medium">
      <Rate defaultValue={3} allowClear={false} />
      <span>allowClear: false</span>
    </Flex>
  </Flex>
);

export default App;

다른 문자 (Other Character)

기본 별을 알파벳, 숫자, iconfont 또는 한자어 같은 다른 문자로 바꿀 수 있습니다.

import React from 'react';
import { HeartOutlined } from '@ant-design/icons';
import { Flex, Rate } from 'antd';

const App: React.FC = () => (
  <Flex vertical gap="medium">
    <Rate character={<HeartOutlined />} allowHalf />
    <Rate character="A" allowHalf style={{ fontSize: 36 }} />
    <Rate character="好" allowHalf />
  </Flex>
);

export default App;

캐릭터 커스터마이즈 (Customize character)

(RateProps) => ReactNode를 이용해 각 캐릭터를 개별적으로 커스터마이즈할 수 있습니다.

import React from 'react';
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
import { Flex, Rate } from 'antd';

const customIcons: Record<number, React.ReactNode> = {
  1: <FrownOutlined />,
  2: <FrownOutlined />,
  3: <MehOutlined />,
  4: <SmileOutlined />,
  5: <SmileOutlined />,
};

const App: React.FC = () => (
  <Flex gap="medium" vertical>
    <Rate defaultValue={2} character={({ index = 0 }) => index + 1} />
    <Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />
  </Flex>
);

export default App;

API

Common props ref：Common props

메서드 (Methods)

디자인 토큰 (Design Token)

컴포넌트 토큰 (Component Token - Rate)

글로벌 토큰 (Global Token)

더 알아보기 (Learn more)

• Rate 스타터 가이드 문서 보기
• Ant Design 컴포넌트 개요
• ConfigProvider로 컴포넌트 설정하기