게으른 나에게

TextField 컴포넌트입력 필드 컴포넌트여러 형태와 동작을 가진 입력 필드 생성 label: 입력 필드의 레이블 설정. 사용자에게 입력할 내용에 대한 안내 제공 역할fullWidth: 입력 필드를 부모 요소의 가로 폭에 맞게 확장하는지 여부 설정value: 입력 필드의 현재 값으로 컴포넌트 상태와 연결되어 동기화onChange: 입력값이 변경될 때 호출되는 콜백 함수를 설정. 이벤트 객체를 통해 입력된 값 가져와서 상태 업데이트, 다른 작업수행marign: 입력 필드 주위의 여백 설정 사용방법

로딩(Loading)시 나오는 스피너(Spinner) 화면에 불러오면 바로 불러지지 않고 일정 시간을 두고 메인화면에 렌더링공백 기간 동안 로딩 컴포넌트 보여주는 식로딩도 하나의 상태(로딩이 되었다, 안 되었다) -> Boolean 형태상태로 관리요청을 시작했을 때 로딩상태 true                     ->  컴포넌트데이터 패치가 완료되었을 때 로딩상태 false     ->    컴포넌트 import { CircularProgress} from "@mui/material";const [isLoading, setIsLoading] = useState(false);useEffect(() => { setIsLoading(true); fetch("/product") ..

. . .  Box 컴포넌트다른 컴포넌트 묶어서 스타일 및 레이아웃 적용요소 감쌈props 사용해 스타일, 레이아웃, 간격 등 설정내부 요소 묶어서 스타일 직접 지정  . . . AppBar 컴포넌트헤더 영역 표시position으로 위치를 정적(static)으로 설정 -> 페이지 스크롤과 상관없이 항상 고정된 위치 표시sx props사용자화해서 스타일 적용mb: 4 / marginBottom을 4의 단위로 설정 -> 하단에 4만큼 여백  . . . Toolbar 컴포넌트상단 네비게이션, 로고, 검색 창, 액션 버튼 등 상단 도구바(Toolbar) 생성하는데 사용sx prop..

그리드레이아웃 구성, 쉽게 만들 수 있는 기능 제공일직선의 레이아웃 쉽게 구현 가능기본적으로 가로 화면 12등분반응형 디자인 지원 그리드 개념Container(컨테이너): 그리드 컴포넌트 감싸는 최상위 컨테이너. 그리드 레이아웃 구성하는 요소 감싸는 역할.item(아이템): 그리드 컨테이너 안에 표현되는 각각 아이템 요소. 그리드 시스템 내에서 정렬되고 배치될 수 있는 단위. 아이템 크기 배치 지정xs: 가장 작은 화면 크기에서 아이템의 크기와 배치 지정. 일반적으로 모바일 기기 기준sm: 작은 화면에 크기에서 아이템의 크기와 배치 지정. 일반적으로 태블릿 기기 기준md: 중간 화면 크기에서 아이템의 크기와 배치 지정.lg: 큰 화면 크기에서 아이템의 크기와 배치 지정. 일반적으로 데스크탑 화면을 기준x..

MUI(material-UI) 라이브러리리액트 UI 도구디자인이 미리 적용되어 완성된 UI 컴포넌트 사용 가능사용자화 가능한 테마 통해 일관된 스타일 적용빈응형 디자인 지원 및 다양한 기능, 유틸리티 제공https://mui.com/ MUI: The React component library you always wantedMUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.mui.com  라이브러리 설치yarn add @mui/material @emotion/react @emotion/styled mui ..