dev/React 썸네일형 리스트형 [React 성능 최적화] react-tooltip 성능 이슈 해결 성능 최적화를 진행하며 react-tooltip이 매우 느리게 렌더링 되는 것을 확인했습니다.검색해보니 관련된 이슈가 있었습니다. https://github.com/ReactTooltip/react-tooltip/issues/334 ReactTooltip renders very slow when used many time on the same page · Issue #334 · ReactTooltip/react-tooltipI'm displaying tooltips in some table cells in tables that contain 500+ items. Rendering is extremely slow. When I remove just the ReactTooltip elements, the t.. [React 성능 최적화] Children 컴포넌트의 불필요한 렌더링 방지하기 React를 최적화하는 업무를 받아 작업을 진행하며 알게 된 것들을 공유하고자 합니다.우선 react에서 제공하는 공식 예제를 참조하면 다음과 같습니다.const MyApp = props => { const [name, setName] = useState(''); const [address, setAddress] = useState(''); return ( Name{': '} setName(e.target.value)} /> Address{': '} setAddress(e.target.value)} /> );}위와 같은 컴포넌트에서, MyApp의 address가 .. React에서 TinyMCE 셋업하기 TinyMCE는 현재 기준 꽤 쓸만한 오픈소스 에디터라고 생각합니다. 다만, 클라우드 호스팅된 서비스를 사용하려면 비용을 내야 합니다. 무료 플랜을 제공하고 있으므로 개인 프로젝트 등에서 간단히 사용할 예정이라면 무료 플랜을 사용해 손쉽게 세팅하면 됩니다. 만약 사용자가 많은 서비스인 경우 셀프 호스팅이나 번들링을 통해 무료로 사용이 가능합니다. 본 포스팅에서는 React환경 기반에서 번들링을 통해 TinyMCE를 셋업하는 방법을 설명합니다. 설치 tinymce, @tinymce/tinymce-react, raw-loader를 설치합니다 npm install --save tinymce @tinymce/tinymce-react raw-loader 번들 컴포넌트 구현 tinymce, tinymce-react.. create react app .env 파일 순서 CRA 공식 문서에 따르면 파일 순서는 아래와 같다. Files on the left have more priority than files on the right: npm start: .env.development.local, .env.local, .env.development, .env npm run build: .env.production.local, .env.local, .env.production, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing) 출처] CRA adding custom enviroment .env파일이 하나 이상 있으면 위 규칙이 적용된다. .env .env.production 이렇게 있으면,.. react query optimistic update 테이블에서 메모를 실시간으로 업데이트 해야 했다. 문제는 메모를 수정할 때, 잠깐동안 이전 데이터가 보였다가 수정된 데이터가 보였다. 예를 들어, 'abc'라는 상태에서 '가나다'로 메모를 수정하면 잠깐동안 'abc'로 데이터가 렌더링되었다가 patch가 완료되면 다시 '가나다'로 변경되는 식이었다. 원인은 데이터가 patch(이하 mutate) 되는 동안 아직 업데이트 되지 않은 데이터를 참조하기 때문이었다. ({ ...data memo: }))} /> 대략 이런 구조에서, 데이터를 mutate 할 때 수정된 데이터가 아닌 기존의 list를 참조하기 때문에 잠시 이전의 데이터가 나타났던 것이다. optimistic update를 통해 이 문제를 해결할 수 있었다. optimistic update는 말 .. react 자식 컴포넌트의 함수를 부모 컴포넌트에 내보내기 가끔 react에서 자식 컴포넌트의 함수를 부모 컴포넌트로 내보내야 할 때가 있습니다. 좋은 패턴은 아니지만 필요하다면 useImperativeHandle을 사용하면 됩니다. useImperativeHandle의 특징은 공식 문서 한글 번역이 굉장히 난해하다는 점입니다. 아마 쓰지 말라는 무언의 암시가 아닐까 생각합니다. 공식 문서에서 제공하는 번역은 다음과 같습니다. useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 사용자화(customizes)합니다. 다행히 원문은 아래와 같습니다. useImperativeHandle customizes the instance value that is exposed to parent components when using.. redux를 이용해 react modal을 효율적으로 관리하는 방법 이전에 봤던 코드 중에 전체 프로젝트의 모달을 하나의 컴포넌트에서 제어하는 것을 보았습니다. 이번에 모달을 만들 일이 생겨 관련 내용을 검색해보니 실제로 저와 같은 생각을 하시는 분도 종종 계셨습니다. [Okky 질문글 링크] 링크를 따라가 보시면 댓글에서 Practical Redux, Part 10: Managing Modals and Context Menus 라는 글을 소개하고 있는데, 조금 오래된 글이지만 이 글을 읽고 대략적인 구조를 잡을 수 있었습니다. 본론에 앞서, 이 작업의 목표를 정의하자면 '모달의 상태, 렌더링을 다른 컴포넌트에서 분리하자' 입니다. 자세히 말하자면 다른 컴포넌트에 isOpen 같은 state를 두지 말고 redux 스토어로 관리하는 것이 첫 번째 목표입니다. 그리고 렌더.. Next.js TypeScript 환경에서 Jest 초기 설정 create next app(CNA)에 typescript 옵션을 붙여 프로젝트를 생성한 후 Jest를 설정하는 방법입니다. CNA 을 사용할 경우 Jest 세팅이 되어 있지 않기 때문에 별도로 세팅을 해 주어야 합니다. 공식 문서 링크 Testing | Next.js Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library. nextjs.org 1. 필요 패키지 설치 테스트에 필요한 파일들을 설치합니다. $ yarn add -D @testing-library/dom @testing-library/jest-dom @testing-library/r.. 이전 1 2 다음
