기록

서론 이전 포스트에 이어서 기간을 선택하는 컴포넌트와 셀렉트 박스 컴포넌트를 만들어본다. FormDateRange 컴포넌트 src/enum/DateRange.ts enum으로 기간 선택 시 오늘 최근 7일 한 달을 선택하기 위한 enum과 버튼 텍스트를 반환하는 함수를 만든다. export enum DateRange { ALL = 'ALL', TODAY = 'TODAY', RECENT_WEEK = 'RECENT_WEEK', RECENT_MONTH = 'RECENT_MONTH' } export const DateRangeMethods = { getLabel: (key: string) => { switch (key) { case DateRange.ALL: return '전체'; case DateRange.T..

서론 antd를 이용한 form 컴포넌트 제작. FormItem 하나하나씩 나누어서 만들기. 사용 패키지 yarn add antd @ant-design/icons styled-components yarn add -D @typs/styled-components yarn add -D craco-antd @craco/craco yarn add moment 폴더구조 Craco 이용 antd 테마 커스텀 package.json 에서 start 스크립트를 craco start로 변경해준다. /craco.config.js module.exports = { plugins: [ { plugin: require("craco-antd"), options: { customizeTheme: { "@primary-color": ..

클래스 컴포넌트 - lifecycle 과 state를 사용할 수 있다. class App extends Component { render() { return ( ) } } export default App; 함수 컴포넌트 - state를 사용할수 없었으나 훅이 업데이트되면서 사용가능 - useEffect 로 lifecycle 과 유사한 기능을 사용가능 - 근래엔 함수컴포넌트를 많이 사용함. - 리액트에서도 함수 컴포넌트 사용을권장 - 클래스보다 선언이 편리하고 메모리자원을 덜 사용 한다 const App = () => { return } export default App;