[ 32 ] ant design 별점 가져와서 사용해보기

리액트 컴포넌트를 만드는 두가지 방식 

함수 표현식 

React.FC 타입을 붙여준다

** export default를 붙여서 한번에 작성하면 오류가 난다.

export default const App 는 오류

const App: React.FC = () => {
  const [value, setValue] = useState(3);
  return (
    <Flex gap="middle" vertical>
      <Rate tooltips={desc} onChange={setValue} value={value} />
    </Flex>
  );
};

export default App;

함수 선언식 

리턴 타입에 JSX.Element를 붙여준다.

export default function App(): JSX.Element {
  const [value, setValue] = useState(3);
  
  
	return(<div></div>)
  }

 

ant design으로 부터 별점 컴포넌트를 가져와서 사용하기 

export default function App(): JSX.Element {
  const [value, setValue] = useState(3);

  // == 1단계 방식 ===
  //   const onChangeStar = (value: number): void => {
  //     setValue(value);
  //   };

  //   == 2단계 방식 ===
  //     const onChangeStar = (value: number) => setValue(value);

  // React의 기본 이벤트 핸들러에서는 이벤트 객체(event)를 매개변수로 전달합니다.
  //  이는 HTML 이벤트 핸들러와 유사한 방식으로 동작합니다.
  //  그러나 라이브러리나 특정 컴포넌트에서는 더 편리하게 사용할 수 있도록 커스텀 이벤트 핸들러를 정의하고,
  //   이벤트 객체 대신 특정 데이터(예: 선택한 값)를 매개변수로 전달할 수 있습니다.
  // antd(Ant Design) 라이브러리의 컴포넌트들은 일반적으로 이벤트 핸들러로 이벤트 객체 대신,
  //  해당 컴포넌트의 상태나 값을 매개변수로 전달합니다.
  //   이는 사용자 경험을 개선하고, 개발자가 필요한 데이터를 더 쉽게 얻을 수 있도록 돕기 위한 것입니다.

  return (
    // <Rate onChange={onChangeStar} value={value} />// 1단계 방식
    // <Rate onChange={onChangeStar} value={value} /> // 2단계 방식
    // <Rate onChange={(value)=>{setValue(value)}} value={value} /> // 3단계 방식
    <Rate onChange={setValue} value={value} /> // 4단계 방식
  );
}