기록

서론 이전 포스트에 이어서 기간을 선택하는 컴포넌트와 셀렉트 박스 컴포넌트를 만들어본다. 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": ..

useState 용법 const [count, setCount] = useState(0) count -> 현재 상태값 setCount -> 상태값 변경 useState(0) -> 초기 상태값 0 Count 예제 const Count = (props) => { return{props.count} } const App = () => { const [count, setCount] = useState(0) const handleIncrease = () => { setCount(count + 1); // setCount(prevState => prevState + 1) 이렇게도 사용가능 } const handleDecrease = () => { setCount(count - 1); } return ( + - ) ..

State - 컴포넌트 안에서 관리되어짐. - 변경가능 - 동적인 상태값 const Name = (props) => { return{props.name} } const App = () => { const [name, setName] = useState('dev.jung') return } Props - 부모 컴포넌트로부터 받는 값 - 수정 불가능 const Name = (props) => { return{props.name} } const App = () => { return }

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

소스코드 import { useState } from 'react'; import styled from 'styled-components'; const StyledCollapse = styled.div` .content{ background: blue; color: white; max-height: 0; bottom: 0; overflow: hidden; -webkit-transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .content.on { max-height: 500px; -webkit-transition: max-h..