JavaScript/React8 React에서 지원하는 DOM 이벤트 리액트에서 지원하는 이벤트: 출처 https://eunii.github.io/2019/09/03/tec/react/react7/ [React 교과서] 6장 React 에서 이벤트 다루기 리엑트 교과서를 정리한 내용입니다. 6.1 React에서 DOM이벤트 다루기아래 예제 코드는 이벤트 리스너에서 this를 콘솔에 표시하도록 한 코드. 여기서 event 객체는 내장 DOM이벤트를 객체를 개선한 것 eunii.github.io 2022. 7. 22. React SelectBox 커스텀하기 리액트에서 select ui를 원하는모양으로 커스터마이징해보자 기본 html 를 그대로 이용하지 않고 리액트 material-ui에서 제공하는 styled-components를 사용해서 component별로 커스텀화해서 사용하고 있다. style.js import styled from "styled-components"; import './style.css'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import FormControl from '@mui/material/FormControl'; import Inpu.. 2022. 7. 22. React Toggle 사용하기 리액트에서 토글(toggle) 버튼을 사용해보자 Switch.js 파일을 생성한다. import React from 'react'; import "../styles/style.css"; // custom css const Switch = ({ isOn, handleToggle }) => { return ( ); }; export default Switch; css 파일에서 스타일을 추가한다. /* style.css */ /* swtich */ .react-switch-checkbox { height: 0; width: 0; visibility: hidden; } .react-switch-label { display: flex; float: right; align-items: center; justify-.. 2022. 7. 12. React custom styling 해보기 리액트에서 css style을 적용하는 방법은 다양하다. 리액트 css관련 라이브러리 "material-ui"를 사용하여 스타일링을 적용해보자 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster. mui.com 💠 cmd에서 material-ui를 설치한다 npm install @mui/material @em.. 2022. 7. 1. 이전 1 2 다음
