react 2

[React] useNavigate Hook์œผ๋กœ ํŽ˜์ด์ง€ ์ด๋™ํ•˜๊ธฐ(Hook ์ง์ ‘ ๋งŒ๋“ค๊ธฐ)

React Hook๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒํƒœ๊ฐ’ ์ ‘๊ทผ๊ณผ ์ž์‹ ์š”์†Œ์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ๋ฆฌ์•กํŠธ๋Š” useState, useEffect ๊ฐ™์€ ๋‚ด์žฅ Hook์„ ์ œ๊ณตํ•ด์ฃผ๋Š”๋ฐ, ์ด ์ค‘ useNavigate๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํŽ˜์ด์ง€๋ฅผ ์ด๋™ํ•ด๋ณผ๊ฒŒ์š”~! ์ €๋Š” Hook์„ ์ง์ ‘ ๋งŒ๋“ค๊ฑด๋ฐ, ํ•œ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ useNavigate()๋ฅผ ์„ ์–ธํ•˜์—ฌ ์‚ฌ์šฉํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. => ์ด๋ ‡๊ฒŒ ํ•˜๋Š” ์ด์œ ๋Š” ๋งจ ๋ฐ‘์—์„œ ์†Œ๊ฐœ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค! 00. useNavigate usePage ๋ผ๋Š” ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. usePage.js import { useNavigate } from "react-router-dom"; function usePage() { /** ํŽ˜์ด์ง€ ์ด๋™ hook */ const navigate = useN..

[Material Design] Material-UI(MUI)๋กœ react & styled component ์‚ฌ์šฉํ•˜๊ธฐ <MUI์†Œ๊ฐœ & npm ์„ค์น˜>

- ๋ณธ ๋ฉ”ํ…Œ๋ฆฌ์–ผ ๋””์ž์ธ ์†Œ๊ฐœ๋Š” Material Design 2 ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜„ (3์€ web ๋ฆด๋ฆฌ์ฆˆ ๊ฐœ๋ฐœ ์ง„ํ–‰ ์ค‘์ด๋ผ์„œ!) https://material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io 00. Material-UI(MUI) ๋ž€? https://mui.com/ MUI: The React component library you always wanted MUI provides a s..