전체 글

미리보기 사용방법 1. MUI 설치 1.1 작업 폴더에서 터미널을 켠다 VSC단축키(Ctrl + ` (esc 밑에 있는 거)) 1.2 아래 코드를 순서대로 터미널에 입력한다. npm install @mui/material @emotion/react @emotion/styled npm install @mui/material @mui/styled-engine-sc styled-components npm install @fontsource/roboto npm install @mui/icons-material // 참고 링크 //https://mui.com/material-ui/getting-started/installation/ 2. 컴포넌트 만들기 2.1 ChatTest.jsx 파일을 생성하고 아래 코드를 ..

1. 위치 2. 정렬 3. 크기 4. 디자인

import React from 'react'; import styled, { css } from 'styled-components'; const sizes = { desktop: 1024, tablet: 768 }; // 위에있는 size 객체에 따라 자동으로 media 쿼리 함수를 만들어줍니다. // 참고: https://www.styled-components.com/docs/advanced#media-templates const media = Object.keys(sizes).reduce((acc, label) => { acc[label] = (...args) => css` @media (max-width: ${sizes[label] / 16}em) { ${css(...args)}; } `; ret..

import React, { useState } from "react"; const App = () => { // 초기 데이터 객체 리스트 const [names, setNames] = useState([ { id: 1, text: "눈사람" }, { id: 2, text: "얼음" }, { id: 3, text: "눈" }, { id: 4, text: "바람" }, ]); //입력한 텍스트 state const [InputText, setInputText] = useState(""); //추가 할 데이터 객체의 Id state const [nextId, setNextId] = useState(names.length+1); // 리스트 길이 +1로 설정 //이벤트 객체의 입력한 텍스트 감지 함수 cons..

import React, { useState } from 'react'; const EventPractice = () => { const [form, setForm] = useState({ id:'', pw:'', verification: false, }); const {id, pw, verification} = form; // 비구조화 할당 const onChange = (e) => { const nextForm = { ...form, [e.target.name] : e.target.value // name }; setForm(nextForm); console.log(nextForm); } // 검증 함수 const verify = () => { if(pw==='1234') // 비밀번호가 1234라면..

import React, { useState } from 'react'; const EventPractice = () => { const [form, setForm] = useState({ // 객체 형식의 useState를 생성하여 여러 개의 입력 값을 받을 수 있도록 한다 username:'', // 요소의 입력 값을 받을 key-value message:'', // 위와 동일 }); const {username, message} = form; // form 객체를 비구조화 할당하여 이후 form.username이 아닌 username으로 사용 가능 const onChange = (e) => { const nextForm = { ...form, // 기존 form을 복사하여 [e.target.name..

참고 자료 https://mui.com/material-ui/customization/how-to-customize/ How to customize - Material UI Learn how to customize Material UI components by taking advantage of different strategies for specific use cases. mui.com 참고 코드 import * as React from 'react'; import Slider from '@mui/material/Slider'; import { alpha, styled } from '@mui/material/styles'; const SuccessSlider = styled(Slider)(({ them..