Language/React
-
React/RadioButton Component 만들기Language/React 2022. 12. 1. 10:15
Radio component가 마땅한게 없어서 급조해 봤다. Parent Component import React, { Component } from 'react'; ... class UnitViews extends Component { ... render() { ... return ( { const checked_unit_status = value === '' ? null : [value]; this.setState({ unitStatus: value }, this.props.onUpdate({ UNIT_STATUS: checked_unit_status })); }} /> ... ... ); } } export default wrapWithBase(UnitViews); RadioButton Compon..
-
React/X-Bar chart 만들기Language/React 2022. 12. 1. 10:08
챠트를 만들어야 하는데 마땅한게 없어서 만들어 보았다. (x,y chart는 간단하니깐!) 데시보드 import React, { Component } from 'react'; ... class DashboardTab1 extends Component { ... render() { const receiptStatusCounts = { PAY_COMPLETE_AMOUNT: 50.0, PAY_COMPLETE_COUNT: 2, PAY_FAIL_AMOUNT: 3.0, PAY_FAIL_COUNT: 1, PAY_WAIT_AMOUNT: 7.5, PAY_WAIT_COUNT: 1, payCompletePercent: 50, payFailPercent: 25, payWatePercent: 25, }; const styleB..
-
React/DropdownSearch 만들기Language/React 2022. 12. 1. 09:54
간단한 검색이 가능한 dropdown을 만들려고 한다. css .g-dropdown-search-wrap { position: relative; } .g-dropdown-search-wrap > .search-section { display: flex; justify-content: flex-start; align-items: center; } .g-dropdown-search-wrap > .search-section input { width: 100%; padding: 12px 8px; border: 1px solid #D9D9D9; } .g-dropdown-search-wrap > .search-section input:focus { border: 1px solid #25B9B9; } .g-dropd..
-
React/moment 사용 탐방Language/React 2022. 10. 21. 11:44
앞으로 자주쓸것 같기도 하고 한번에 분석 끝내놓고 나중에 찾아보는 시간을 줄이기 위해서 작성해 둔다. module 추가 $ yarn add moment https://yarnpkg.com/package/moment https://yarnpkg.com/package/moment Fast, reliable, and secure dependency management. yarnpkg.com 기본 사용 방법 import moment from 'moment'; ... console.log(moment().format('YYYYMMDD')); console.log(moment().subtract(1, 'days').endOf('day')); ... 예시) diff 예시 const diffDaysToText = (c..
-
React/memory leak - componentWillUnmount Event 제거 이슈Language/React 2022. 10. 19. 11:08
class Component에서 resize event를 사용하였는데 componentWillUnmount에서 제거해 주어도 메모리 누수가 발생하여 분석 및 처리 내용이다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. 원인 분석 addEventListener/removeEventListener에 동일한 매개변수와 함수를 전달하여야 하는데 t..
-
React/createContext, useContext 사용하기Language/React 2022. 10. 12. 16:56
Class Component -> createContext const MyContext = React.createContext(); class MyComponent extends Component { const [user, setUser] = useState(null); render() { const propsMy = { ... isMobile: () => { return this.isMobile }, ... }; return ( ... ... ); } }; export default MyComponent; Class Component -> useContext class UserComponent extends Component { static contextType = MyContext; state = {..
-
React/AntV G2plot Chart 적용Language/React 2022. 10. 12. 11:50
Module 추가 $ yarn add @antv/g2plot https://yarnpkg.com/package/@antv/g2plot https://yarnpkg.com/package/@antv/g2plot Fast, reliable, and secure dependency management. yarnpkg.com JSX Source Component base라서 ComponentDidMount 함수에서 적용 import { Pie } from '@antv/g2plot'; class UnitsDashboard extends Component { state = {} setPie = () => { const data = [ { type: '라벨1', value: 27 }, { type: '라벨2', val..
-
React/Swiper 적용Language/React 2022. 10. 12. 11:19
module 추가 $ yarn add swiper JSX Code // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperCore, { Navigation, Pagination } from "swiper"; // Styles must use direct files imports import 'swiper/swiper.scss'; // core Swiper import 'swiper/modules/navigation/navigation.scss'; // Navigation module import 'swiper/modules/pagination/pagination.scss'; // Pa..