[TIL] 라이브러리

우기·2023년 3월 28일

TIL 라이브러리

📒 오늘 공부한 내용

🔍수업목차

[12-1] 라이브러리
[12-2] 별점 구현하기
[12-3] 경고창 모달로 변경하기
[12-4] 주소 및 우편번호
[12-5] 캐러셀 이미지 (React-slick)

✅ 라이브러리

ant-Design 사이트
Material-ui 사이트
Ant-Design과 Material-UI는 디자이너의 도움 없이 개발자가 스스로 디자인된 컴포넌트를 만들 수 있도록 도와주는 UI 프레임워크다.

✅ 별점 구현하기

import { Rate } from "antd";
import { useState } from "react";

export default function Star() {
  const [value, setValue] = useState(3);

  function handleChange(value: number) {
    setValue(value);
  }

  return <Rate onChange={handleChange} value={value} />;
}

✅ 경고창 모달로 변경하기

alert()를 대신 Modal을 이용해서 더 다양한 기능과 디자인으로 경고창을 만들 수 있다.

import { useState } from 'react';
import { Modal, Wrapper, ModalWrapper } from '../../src/test2';
export default function ModalTest() {
	const [isTrue, setIsTrue] = useState(false);

	const handleModal = () => {
		setIsTrue((prev) => !prev);
	};

	return (
		<>
			<Wrapper>
				<button onClick={handleModal}>나와라 모달</button>
				{isTrue && (
					<ModalWrapper>
						<Modal>
							<button onClick={handleModal}>모달 닫기</button>
						</Modal>
					</ModalWrapper>
				)}
			</Wrapper>
		</>
	);
}

import styled from '@emotion/styled';

export const Wrapper = styled.div`
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
`;
export const ModalWrapper = styled.div`
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: black;
	opacity: 0.7;
`;
export const Modal = styled.div`
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	top: 100px;
	width: 300px;
	height: 300px;
	border: 1px solid black;
	border-radius: 20px;
`;