본문 바로가기

Coding/react

최적화 설정하기 (react-virtualized, immer) react-virtualized 2,500 개 컴포넌트 중 2,491 는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링이 이루어집니다. react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지하게끔 할 수 있습니다. 만약 스크롤되면 해당 스크롤 위치에서 보여 주어야 할 컴포넌트를 자연스럽게 렌더링 시킵니다. yarn add react-virualized import React, { useCallback } from 'react'; import { List } from 'react-virtualized'; import TodoListItem from './TodoListItem'; import './TodoList.scss'; c.. 더보기
스타일링 설정하기 Sass 사용하기 Sass 는 .sass 확장자와 .scss 확장자를 지원합니다. 보통 .scss 확장자를 사용합니다. yarn add node-sass 이 라이브러리는 Sass 를 css로 변환해줍니다. sass-loader 설정 커스터마이징하기 create-react-app 으로 만든 프로젝트는 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있습니다. 이를 커스터마이징하려면 프로젝트 디렉터리에서 yarn eject 명령어를 통해 세부 설정을 밖으로 꺼내 주어야 합니다. (commit 한후) yarn eject webpack.config.js 에서 "sassRegex" 두번째 탐색결과에서 use 부분을 아래와 같이 수정합니다. { test: sassRegex, exclude: sassModuleReg.. 더보기
Reactjs code snippets 설정하기 VSCode 확장프로그램에서 설치를 합니다. 작성자가 charalampos karypidis 인 프로그램을 설치합니다. 코드를 작성할때 자주 반복적으로 작성하기 귀찮으니 단축키를 입력해서 쉽게 템플렛을 가져옵니다. 현재 저는 rsc 만 사용하고 있습니다. 더보기
ESLint와 Prettier 설정하기 ESLint ESLint는 문법검사 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. Prettier-Code formatter 코드 스타일을 자동으로 정리해주는 도구입니다. VSCode 확장프로그램에서 다운받으면 됩니다. .prettierrc를 프로젝트의 루트 디렉토리에 만들어줘야 합니다. (설정예제) { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, } 정렬은 파레트명령어(F1 또는 ctrl + shift + p)에서 format selection(부분정렬) 또는 format document(전체정렬) 를 입력해야합니다. 단축키는, 부분 정렬 하려면 뭔하는 부분 드래그하고 ctrl + k + f 하면 됩니다. ctr.. 더보기