Language/React
-
nextjs에서 svg 컴포넌트로 사용하는 방법Language/React 2024. 4. 4. 09:34
컴포넌트 형태로 svg를 사용하려면? 설치$ yarn add url-loader$ yarn add @svgr/webpack custom.d.tsdeclare module '*.mdx';declare module '*.svg' { const ReactComponent: React.FC>; const content: string; export { ReactComponent }; export default content;} next.config.js/** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, eslint: { // Warning: This allows production builds to..
-
react-hook-form typescript로 변환 및 컴포넌트 생성 (antd)Language/React 2023. 12. 27. 17:42
이번 포스팅에서는 react-hook-form을 전체 사이트에 적용하기에 앞서 코드 라인을 줄여서 가독성을 높이고 타입스크립트로 컴포넌트를 제작해 두려고 한다. 현재 javascript 및 typescript가 혼재 되어 있지만.. 시간될때 마다 수정해 나가자! 언젠간.. typescript만 남으리라!! react-hook-form component 적용import { useForm } from 'react-hook-form';import { NInput, NInputNumber, NTextArea, NCheckbox, NSelect, NRadioGroup, NTinyMceEditor, NImageSelector } from 'components/FormControls';const TestPop = (..
-
react에 typescript 적용하기Language/React 2023. 12. 27. 15:33
회사에서 사용중인 오래된 버젼인 리액트 ^16.13.1에서 typescript만 적용해 보려고 한다. React@^16.13.1 버전과 잘 맞는 버전 React@^16.13.1과 잘 맞는 typescript 버전에 대해서 ChatGPT 질의 한 결과를 토대로 진행하려고 한다. 설치 모듈 및 버전 Modules react-hook-form 버전 typescript@^4.1.2 yarn add --dev typescript@^4.1.2 @types/node@^10.17.27 yarn add --dev @types/node@^10.17.27 @types/react@^16.9.0 yarn add --dev @types/react@^16.9.0 @types/react-dom@^16.9.0 yarn add --de..
-
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 이상..
-
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..
-
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) =>..
-
React/InfiniteScroll - 외부 collectionLanguage/React 2022. 12. 2. 09:49
InfiniteScroll을 공통으로 사용하기 위해서 Component형식으로 만들고 나중을 위해서 정리해 둔다. InfiniteScroll Component 외부에 collection을 두고 사용하는 방식 부모 컴퍼넌트 import React, { Component } from 'react'; ... class RequestViews extends Component { state = { infiniteResetUseEffect: false, // Infinite 외부에서 리스트를 초기화 해줘야 할 경우 변경 requests: [], ... }; fetchMoreList = (offset) => { return new Promise((resolve, reject) => { const pagination ..
-
React/InfiniteScroll - 내부 collectionLanguage/React 2022. 12. 2. 09:47
InfiniteScroll을 공통으로 사용하기 위해서 Component형식으로 만들고 나중을 위해서 정리해 둔다. InfiniteScroll Component 내부에 collection을 두고 사용하는 방식 부모 컴퍼넌트 import React, { Component } from 'react'; ... class RequestViews extends Component { state = { infiniteResetUseEffect: false, // Infinite 외부에서 리스트를 초기화 해줘야 할 경우 변경 requests: [], ... }; fetchMoreList = (offset) => { return new Promise((resolve, reject) => { const pagination ..