component를 array로 정의

import InboxIcon from "@mui/icons-material/MoveToInbox"; import MailIcon from "@mui/icons-material/Mail"; import MenuIcon from "@mui/icons-material/Menu"; import BusinessIcon from "@mui/icons-material/Business"; ... let array: JSX.Element[] = []; array.push(); array.push(); array.push(); array.push();

• format_list_bulleted [====== Development ======]/React
• · 2022. 8. 10.
• textsms

[React] Meterial UI - Nested List Items

Material demo (forked) - CodeSandbox https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/lists/NestedList.js codesandbox.io import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import ListSubheader from "@material-ui/core/ListSubheader"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListI..

• format_list_bulleted [====== Development ======]/React
• · 2022. 8. 10.
• textsms

[VSCode] JavaScript (ES6) code snippets

clg for console.log(object); clo for console.log('object :', object); ccl for console.clear(object); cer for console.error(object); ctr for console.trace(object); clt for console.table(object); cin for console.info(object); cco for console.count(label);

• format_list_bulleted [====== Development ======]/React
• · 2022. 8. 9.
• textsms

uuid값 생성하기

npm install uuid import { v4 as uuidv4 } from 'uuid'; uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

• format_list_bulleted [====== Development ======]/React
• · 2022. 3. 16.
• textsms

이미지 파일 선택하여 Preview 출력

function Home() { const [attachment, setAttachment] = useState(); const handleAddPhoto = (event) => { console.log("handleAddPhoto"); const { target: { files }, } = event; const theFile = files[0]; const reader = new FileReader(); reader.onloadend = (finishedEvent) => { const { currentTarget: { result }, } = finishedEvent; setAttachment(result); }; reader.readAsDataURL(theFile); }; return ( {atta..

• format_list_bulleted [====== Development ======]/React
• · 2022. 3. 16.
• textsms

[React Study] Link Page

import { BrowserRouter as Router , Switch , Route, Link } from "react-router-dom"; import Detail from "./routes/Detail"; import Home from "./routes/Home"; function App() { return ( ); } export default App; import { useEffect, useState } from 'react'; import Movie from '../components/Movie' function MovieList(props) { return ( {props.movies.map((movie) => ( ))} ); } function Home() { const [isLoa..

• format_list_bulleted [====== Development ======]/React
• · 2022. 1. 16.
• textsms