노력하는 개발자 노력하는 개발자

Language/React

• react-hook-form 적용기 (antd)

  Language/React 2023. 12. 18. 13:18

  구 버전의 node 14.17.4 + react 16.13.1 에서 react-hook-form을 적용해보자. react-hook-form은 Node 16.0.0 이상을 권장한다고 하는데 다음 분기때 버전 올릴 계획도 있고 백오피스에 적용하는거라서 큰 문제가 발생하지 않는다고 판단되어 적용하기로 하였다. 이런 저런 핑계로 지금 안하면 나중에도 못한다.! Node버전과 React버전 별 사용가능한 react-hook-form 버전 Node 버전 React 버전 react-hook-form 버전 12.17.0 이상 16.8.0 이상 7.3.0 이상 14.17.0 이상 16.13.0 이상 7.3.0 이상 16.0.0. 이상 17.0.0 이상 7.3.0 이상 17.0.0. 이상 18.0.0 이상 7.3.0 이상..

  Read More
• NextJS에서 queryString 변경 감지 hook 만들기

  Language/React 2023. 10. 20. 09:43

  NextJS 환경에서 `/aaa?arg1=111` 경로를 `/aaa?arg1=222`로 push 혹은 replace 헀을떄 arg1를 받아오는 hook을 생성하는 과정을 간략하게 정리해 놓는다. useQuery 훅 생성 필자는 p가 팝업레이어 아이디인데 path가 바뀔때 그부분은 제외한 로직이다. export function useQuery() { const router = useRouter(); const [query, setQuery] = useState(router.query); useEffect(() => { const beforeQuery = { ...query }; const afterQuery = { ...router.query }; // 팝업 파라미터 제외 (레이어 팝업) delete be..

  Read More
• React Loop 모음

  Language/React 2023. 5. 11. 16:56

  리액트에서 사용하는루프 정리 ... const ORDER_BY_PUBLISH_DT = 'PUBLISH_DT'; const ORDER_BY_EXP_DAYS = 'EXP_DAYS'; const ORDER_BYS = { [ORDER_BY_PUBLISH_DT]: '최근등록순', [ORDER_BY_EXP_DAYS]: '마감임박순', }; const NoticeItems = (props) => { ... return ( 총 {Util.setComma(totalCount)}개 context.openPopup(POPUP_ORDER_BY)}> {ORDER_BYS[orderBy]} {(() => { if (items && items.length > 0) { return ( {items.map((item, index) =>..

  Read More
• 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..

  Read More
• 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..

  Read More
• 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..

  Read More
• 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..

  Read More
• 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..

  Read More