프론트엔드/React

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..

참고자료 https://velog.io/@dev_cecy/npm-install-%EC%98%A4%EB%A5%98-code-ERESOLVE npm install 오류 (code ERESOLVE) 예전에 작성했던 코드를 로컬로 다시 클론받아 코드를 수정하려고했다. 화면을 보기위해npm start를 해주었더니, script 오류가 났고🤦🏻‍♀️ 당황하지 않고 npm install을 해주었다. 그랬더니 이 velog.io 참고 코드 npm install `패키지명' --save --legacy-peer-deps 코드 해석 from GPT3.5 npm install --save --legacy-peer-deps는 npm 패키지 관리자를 사용하여 프로젝트에 새로운 패키지를 설치하는 명령어입니다. 각 옵션의 의미는 ..

참고자료 https://www.daleseo.com/react-radio-buttons/#google_vignette React에서 라디오 버튼 사용하기 Engineering Blog by Dale Seo www.daleseo.com 예시코드 function Radio({ children, value, name, defaultChecked, disabled }) { return ( {children} ); }; const GenderSubmitButton = styled.input` `; function Gender() { const [selection, setSelection] = useState(); return ( {selection} { e.preventDefault(); setSelection(..

사용방법 사용 할 때에는 만들 모달 컴포넌트를 원하는 위치에 붙이면 됨 ex) npm install styled-components 주석 버전 // import import Box from '@mui/material/Box'; import Modal from '@mui/material/Modal'; // 모달 박스 스타일 객체 const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: 400, bgcolor: 'background.paper', border: '2px solid #000', boxShadow: 24, p: 4, }; // 모달 컴포넌트 function Moda..

React에서 props를 함수의 인수로 전달할 때 중괄호({})를 붙이지 않는 이유는 JavaScript의 구문 규칙에 기인합니다. React에서 props는 JavaScript 객체로 전달됩니다. 일반적으로 객체를 함수에 전달할 때는 중괄호({})를 사용하여 객체를 감싸주는 것이 올바른 구문입니다. 그러나 React에서는 중괄호({})를 사용하지 않는 이유는 JSX 문법과 관련이 있습니다. JSX는 JavaScript를 확장한 문법으로, React 컴포넌트에서 UI를 작성하기 위해 사용됩니다. JSX에서 중괄호({})는 JavaScript 표현식을 나타내는 데 사용됩니다. 중괄호({}) 안에는 JavaScript 표현식을 넣을 수 있고, 그 값은 JSX에서 평가되어 출력됩니다. React에서 컴포넌트..