반응형 📍 Front-End72 [React.js/Material-UI] 리액트에서 Material-UI 사용하기 - custom theme 적용 @material-ui에서 기본적으로 제공하는 default theme이 있다. default theme은 typography나 컬러코드를 가진 palette 등 기본적으로 설정된 테 마셋을 요구사항에 따라 사용자가 커스텀하여 테마셋을 설정할 수도 있다! 1. theme 파일 생성 theme.js 파일을 생성한 후 @material-ui/core에서 createTheme을 import한다 json 형태의 테마 값을 요구사항에 맞게 설정한다. Default Theme - Material-UI Here's what the theme object looks like with the default values. v4.mui.com 🔥예시🔥 import { createTheme } from "@material-u.. 2021. 10. 11. [React.js/Material-UI] 리액트에서 Material-UI 사용하기 - custom style 적용 앞서 작성한 MUI 관련 포스팅에 이어서 쓰는 두 번째 MUI 포스팅 MUI에서 제공하는 Component를 Custom 하여 사용하고 싶을 때 여러 가지 방법이 있다. 1. withStyles @material-ui/styles에서 제공하는 withStyle import React from "react"; import { CssBaseline, Button } from "@material-ui/core"; import { withStyles } from "@material-ui/styles"; const App = () => { const StyledButton = withStyles({ root: { backgroundColor: `black`, color: "#fff", "&:hover": { ba.. 2021. 10. 10. [React.js/Material-UI] 리액트에서 Material-UI 사용하기 - 기초 회사에서 Material-UI 가이드를 작성할 일이 생겼는데 다시 공부할 겸 블로그에도 기록하기😵💫 아래 가이드는 V4 버전을 기준으로 작성되었습니다. 가장 먼저 할 일은 리액트 프로젝트를 생성한 다음 Material-UI를 사용하기 위한 필수 dependency를 추가해야 된다! 1. dependency 추가 material-ui/core에서 공통 컴포넌트를 꺼내와서 사용할 수 있으므로 추가 필수! // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core 그리고 MUI 컴포넌트를 커스텀하기 위해 material-ui/styles도 추가해준다 // with npm npm install @material-ui/sty.. 2021. 10. 9. [React/React Hook] useEffect(), useCallback() useEffect() // 컴포넌트가 마운트 됐을 때 (=componentDidMount) useEffect(()=>{ // code .. },[]); // 컴포넌트가 업데이트 됐을 때 (=componentDidUpdate) const updated = useRef(false); useEffect(()=>{ if(!updated.current) mounted.current = true; //code }, [변경값]); // 마운트 && 업데이트 useEffect(()=>{ //code }.[변경값]); useCallback() useCallback(callback, [변경되는 값]); 2021. 7. 27. 이전 1 ··· 9 10 11 12 13 14 15 ··· 18 다음 반응형
