몽땅뚝딱 개발자

책+구글링으로 구현해봤던 레이아웃과 라우터 쪼개기! 이전에 만들어놨던거 기록기록...✍🏻 📄 index.tsx 로 묶어준다. import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import App from './App' import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( , ) 📄 App.tsx 컴포넌트를 만들고 작성한다. import React from 'react' import styles from..

테마를 분리해보자.... 해내고나니 뿌듯하다... ^_ ^ㅋ 다만 리팩토링이 필요하다. 1. type으로 선언했는데 interface와 구분이 잘 되지 않는다. 좀 더 알아본 뒤 변경해야 할 것 같다. 2. 좀 더 공통화 할 수 있는 부분이 있을 것 같다. 3. 기본값도 유니온을 사용해서 type으로 만들 수 있을 듯?! 📄 CommonButton.tsx import styled, { css } from 'styled-components' // ... function CommonButton(props: ButtonProps) { return ( {props.label} ) } export default CommonButton ButtonProps는 이렇게 지정해주었다. /** * **label**: 버튼..

◽ useState 초기 렌더링 시에 사용하는 state로, 이후의 렌더링 시에는 이 값은 무시된다. function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( Count: {count} setCount(initialCount)}>Reset setCount(prevCount => prevCount - 1)}>- setCount(prevCount => prevCount + 1)}>+ ); } 📄 setter를 사용하여 값 변경하기 // 배열 const [category, setCategory] = useState([ [CategoryType.CHARACTER]: { isOpen: false, }, ..