Tag Archives: react
[react] 배열(array)로 된 상태(state)의 요소(element) 일부를 수정했는데, 상태변화가 감지(인지/인식)되지 않는 경우 (change not applied)
배열의 요소를 변경한 후, 배열의 사본을 set 해야 한다. array1 이라는 state라면 => […array1] 로 적용
[react] html 엘리먼트 (real dom element) 에 리액트 컴포넌트 (react component) 삽입(insert)하기
환경 react ^18.2.0 import React, { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import TestExt from "./TestExt"; /** * TestExt 컴포넌트를 특정 DOM 노드에 선택적으로 삽입하기 위해 wrapping한 컴포넌트 */ const TestExtWrap = ({ isOpen }: { isOpen: boolean }) => { const wrap = document.getElementById("div-sample")!; return <>{isOpen && createPortal(<TestExt />,… Read More »
[react] package.json 내의 라이브러리 버전 고정의 위험성
환경 vite 2.9.15 @mui/material ^5.10.5 @mui/material 의 버전업이 너무 빨라서 ‘되던 게 안되는 현상’ 이 발생하여 (minor version 변경임에도 props 구조가 변해 버림) 꺽쇠 ^를 사용하지 않고 버전 숫자만으로 지정하여 고정을 시도했으나, yarn build는 성공했는데 yarn dev 에서 알 수 없는 오류를 계속 뱉어내어 롤백을 했다.
[react/typescript] 하나의(single) html 엘리먼트(element)에 2개 이상의(multiple) ref 를 바인딩 하는 샘플 (useRef)
<input … ref={(el) => { refA(el); // (1) react-hook-form > controller가 주는 ref (refB as MutableRefObject<HTMLInputElement | null>).current = el; // (2) imask의 useIMask가 주는 ref }} … /> 참고 처음 찾아본 문서에는 (1)의 방식만 소개되어 있어서 일괄 적용해 봤더니 refA는 정상 적용되고, refB는 ‘함수가 아닙니다’ 류의 오류가 발생. 좀 더 찾아보니 위에 기록한 (2)… Read More »
[react] children 으로 props 넘기는 방법 샘플코드 (pass props to children)
샘플코드 return ( <> {React.cloneElement(children, { prop1: 'AAA', prop2: 'BBB' })} </> ); 그냥 편리하게 개량해 본 것 return ( <> {React.cloneElement(props.children, { …_.omit(props, ['children']) })} </> ); children을 omit 하지 않아도 잘 작동하는데, 그냥 찝찝해서 넣어 봄
react router v6 에서 path variable parameter 처리 샘플 코드
route <Route path="invoices/:invoiceId" element={<Invoice />} /> page function Invoice() { const { invoiceId } = useParams(); const invoice = fetchBlaBla(`/api/invoices/${invoiceId}`); … }
[react/typescript] FC의 Props type을 조건부(conditionally) 필수(required) 처리 하는 샘플코드
react로 select box를 구현하던 중 작성한 코드 type SELECT_기본선택지 = '선택' | '전체'; type Props = { data: any[]; // select box를 구성할 리스트 데이터 labelKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 label로 사용하고 싶을 경우 기재 valueKeyName?: string; // 리스트(=data)의 요소에서 특정 프로퍼티를 option의 value로 사용하고 싶을 경우 기재 style?: CSSProperties; } &… Read More »
[React] css로 배경이미지(background image) 넣는 샘플코드
<div style={{ backgroundImage: `url("http://blabla/bg.png")`, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', }} ></div>
[React/버튼] button 태그로 만든 버튼이 아닌, div 태그로 a 태그(anchor)를 감싼 형태의 button에 대한 이벤트 바인딩 삽질기
환경 React 18.2.0 Typescript 4.6.3 eslint 8.16.0 common.ts /** * onKeyDown 이벤트핸들러에서 엔터키로 함수 실행하기 */ export const onKeyDownCall = (e: React.KeyboardEvent, func: (ev: React.SyntheticEvent) => void) => { // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); func(e); } }; test.tsx //… Read More »
[react] jsx(tsx) 파일 내 텍스트에서 따옴표(quote, quotation) 입력하기
방법 중괄호(curly braces)로 감싸주고 javascript string 으로 표현. 예시 return (<p>{"I've seen the movie."}</p>) 참고 https://stackoverflow.com/questions/32979512/react-jsx-how-to-render-text-with-a-single-quote-example-pive-p
[링크/react-router] 리액트 라우터 – 중첩된 라우트 (레이아웃(layout) 구성, outlet, path variable…)
리액트 라우터 – 중첩된 라우트 Passing props to when nestining routes in React Router v6?
[링크] React Render Props 패턴 관련
메모 hooks가 render props를 대부분 대체하지만, 그래도 render props가 필요한 경우가 있다… 라는 류의 글들이 심심찮게 보임 참고 Render Props vs React Hooks: Which Is More Efficient?
[react/vite] Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]=
vite 환경에서 토스트그리드(toast grid)를 사용하는데, 로컬에서는 잘 돌아가는데, 빌드 후 nginx에 올리니 위 제목과 같은 스크립트 에러가 발생하고 화면이 뜨질 않았다. 얼마간의 검색 후, 해결이라기 보다는 우회책을 찾게 되어 기록한다. Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= 페이지보다 선행되는 ajax call에 에러가 없는지 점검 (e.g. /api/v1/getMsgList) 1에 문제가 없다면 일부 서드파티 라이브러리에서 ESM에 적합하지 않은… Read More »
vite react build시 에러 메시지와 함께 엔터를 한 번 눌러줘야 빌드가 되었던 현상
package.json … "scripts": { … "dev": "cross-env NODE_ENV=development API_ENV=dev vite", "build": "cross-env NODE_ENV=production API_ENV=dev tsc && vite build", "buildProd": "cross-env NODE_ENV=production API_ENV=prod vite tsc && vite build", … }, … 여기서 bulidProd 실행시에 [Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.] 라는 에러메시지와… Read More »
[링크] 리액트(React) 개념 정리
[javascript] 의존성 관리 [javascript] 성능 최적화 [javascript] 디버깅 React Hooks: useRef 사용법 React useRef의 다양한 활용 방법(mutable object, callback ref와 forwardRef)
[링크] [리액트] 두번 렌더링 되는 이슈에 대하여(Feat.StrictMode, Twice)
https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%91%90%EB%B2%88-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%90%98%EB%8A%94-%EC%9D%B4%EC%8A%88%EC%97%90-%EB%8C%80%ED%95%98%EC%97%ACFeatStrictMode
[링크] vite 프로젝트(project) 생성 템플릿(template) 모음(curation) 사이트 (react, vue…)
https://github.com/vitejs/awesome-vite
[react/next.js] ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed 오류 해결
간단 요약 프로젝트 루트경로 > .next 폴더를 지우고 재실행 참고 https://stackoverflow.com/questions/67652612/chunkloaderror-loading-chunk-node-modules-next-dist-client-dev-noop-js-failed
[React] SWR 조회시 무한루프에 걸렸던 사례 (useSWR, infinite loop)
모듈 상단에서 아래의 swr함수를 호출하는데, useMemo()가 불필요하다고 생각되어 제거했더니 무한루프가 걸렸었음. swr의 args로 들어가는 url string이 함수 내부에서 생성되어 계속 변경이 되니 무한루프가 발생했던 것이었음. 결국 useMemo()를 다시 사용하여 해결 function useSWR(type: string, query?: any) { const url = useMemo(() => { switch(type){ case '1': return '/board/01'; case '2': return '/board/02'; default: return null; }… Read More »