MUI 검색 결과
2 개의 검색 결과가 있습니다.
React.js

리액트 모달창 만들기 2가지 방법

방법 1. 직접 모달창 컴포넌트 만들기 먼저 모달창으로 사용할 UI 컴포넌트를 만들기 위해 Modal.jsx 파일을 생성합니다. * Modal.jsx function Modal() { return ( Modal ); } 이 모달 컴포넌트를 렌더링할 부모 컴포넌트에서는 모달이 열려있는지, 닫혀있는지에 대한 상태를 관리하고 그 상태 값을 모달 컴포넌트에 전달해야 합니다. 모달 컴포넌트에 부모로부터 받을 수 있는 props 코드를 추가하겠습니다. * Modal.jsx function Modal({ isOpen }) { return ( Modal ); } CSS의 display 속성을 이용하였습니다. 결과적으로 isOpen이 true이면 display의 값은 "block"이 되어 사용자의 화면에 모달창이 나타나..

2023. 2. 13. 08:00
React.js

리액트 UI 디자인 고민 Material-UI로 해결하기

디자인 고민을 덜어낼 수 있는 material design 소개 Material design은 구글이 개발한 디자인 언어입니다. 그냥 디자인이 아니라 디자인 언어라고 소개하는 점이 흥미롭습니다. 구글이 Material design을 만든 목적은 디자인의 원칙과 기술적, 과학적 혁신이 결합된 새로운 시각적 언어를 만들기 위함이라고 합니다. 그리고 우리가 보통 의사소통을 위해 사용하는 한국어, 영어 등과 마찬가지로 오픈소스로 공개하여 누구든지 사용 가능하도록 하고 있습니다. 이 시각적 언어는 구체적으로 유저 인터페이스(UI) 디자인의 최상의 결과물을 지원하는 가이드라인, 컴포넌트, 도구들의 시스템을 가지고 있습니다. 오픈 소스로 공개되어 있기 때문에 진짜 사람들이 사용하는 언어처럼 디자이너와 개발자 사이의 ..

2022. 10. 10. 08:08