개발메모장

Next.js에서 React-query를 사용하려면 React 프로젝트와는 조금 다르게 환경을 세팅해야한다. 13버전 이후부터는 RSC가 도입되어 가장 상위 모듈인 layout에서 QueryProvider로 QueryClient를 props로 내려줄 수 없기 때문. Setting app router 환경에서 사용. Next.js 애플리케이션의 엔트리 포인트 지점을 ReactQueryStreamedHydration 과 QueryClientProvider 컴포넌트로 감싸주어야 한다. app에 속하는 하위 컴포넌트들은 기본적으로 서버 컴포넌트로 동작하기 때문에, 에러가 발생할 수 있다. QueryClientProvider는 클라이언트에서 초기화되어야 하기 때문. 따라서 client 사이드에서 동작하는 prov..

useState는 컴포넌트에 state변수를 추가할 수 있게 해주는 React 훅이다. const [state, setState] = useState(initialState) Reference useState(initialState) 컴포넌트 최상위 레벨에서 useStae를 호출하여 state 변수를 선언하자. import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ... [something, setSomet..

Eslint 설치 먼저 프로젝트 루트 디렉토리에서 eslint를 설치한다. pnpm add eslint --save-dev eslint 초기화 eslint를 프로젝트에 적용하려면 초기화해야 한다. eslint를 초기화하려면 다음 명령어를 실행한다. npx eslint --init Prettier 설치 먼저 프로젝트 루트 디렉토리에서 prettier를 설치한다. pnpm add prettier --save-dev prettier 설정 파일 생성 프로젝트 루트 디렉토리에 .prettierrc 또는 .prettierrc.json 파일을 생성한다. { "semi": true, "printWidth": 100, "singleQuote": true, "tabWidth": 2, "trailingComma": "non..

현재 CRA(Create React App)는 더 이상 React 프로젝트를 시작하는 데 권장하는 방법이 아니다. Vite와 PNPM의 조합을 사용하여 리액트 프로젝트 템플릿을 구성해보자. VITE란? Vite는 다른 JavaScript 기반 번들러보다 10~100배 빠르다. Go로 작성되었으며 해당 종속성이 esbuild에 사전 번들로 포함되어 있기 때문이다. 또한 vite는 소스 코드를 기본 ESM으로 제공하여 개발자 생산성 향상을 위한 주문형 변환 및 로딩을 가능하게 했다. PNPM이란? PNPM은 디스크 공간을 최적화하고 설치 속도를 높이는 npm 및 원사보다 빠른 대안입니다. https://pnpm.io/benchmarks 벤치마크 페이지이다. 앱 구축 vite 및 pnpm을 사용하려면 노드 버..

useMemo 는 재렌더링 간에 계산 결과를 cache할 수 있는 리액트 훅이다.const cachedValue = useMemo(calculateValue, dependencies)Useage비용이 비싼 재계산 skip컴포넌트 re-rendering skip다른 Hook의 의존성 기억함수 기억ReferenceuseMemo(calculateValue, dependencies)Useage비용이 비싼 재 계산 skip re-rendering 간에 계산을 cache 하려면 useMemo 구성 요소의 최상위 수준에서 호출로 감싼다.import { useMemo } from 'react';function TodoList({ todos, tab, theme }) { const visibleTodos = useMe..

memo는 props가 변경되지 않았다면 컴포넌트의 재렌더링을 건너뛴다. const MemoizedComponent = memo( SomeComponent, arePropsEqual? ) Useage props가 변경되지 않았을때 재렌더링 skip state를 사용하여 memo화된 컴포넌트 update context를 사용하여 memo화된 컴포넌트 update props 변화 최소화 custom comparison 함수 지정 Reference memo(Component, arePropsEqual?) Useage props가 변경되지 않았을때 재렌더링 skip React는 일반적으로 부모가 재렌더링 될 때마다 컴포넌트를 다시 렌더링한다. memo를 사용하면 새 props가 이전 props와 동일한 부모가 ..

React의 공식 상태관리 라이브러리는 아니지만, 현재 페이스북의 리액트를 개발한 팀에 의해 제작되고 출시. 주요 개념 Atoms Atoms는 recoil에서 상태의 단위를 의미하고 업데이트와 구독이 가능하다. Selectors Selector는 atoms나 다른 selectors를 입력으로 받는 순수함수이다. 최소한의 상태 집합만 atoms에 저장하고, 파생 데이터는 selector에서 계산하면서 불필요한 상태를 만들지 않는다. ex) 국어, 영어 점수를 atoms에 저장, 총점이나 평균은 selector에서 계산 후 get recoil 설치 npm install recoil # index.js 1. recoil 관련 import 2. 사용할 곳을 로 감싼다. import React from 'reac..