본문 바로가기

전체 글105

[React] useMemo()와 React.memo의 차이점 useMemo()와 React.memo는 React의 성능 최적화를 위해 사용되는 두 가지 도구이다. useMemo() 계산 비용이 높은 함수의 반환값을 캐시하여, 같은 인자가 전달될 경우 다시 계산하지 않고 캐시된 값을 반환한다. 이를 통해 불필요한 계산을 줄이고 컴포넌트의 렌더링 성능을 개선할 수 있다. 예시 import { useMemo } from 'react'; function MyComponent(props) { const { data } = props; // data 값이 변경될 때마다 data의 길이를 계산하고, // 그 값을 캐시하여 같은 data가 전달될 때 재사용합니다. const dataLength = useMemo(() => data.length, [data]); return {d.. 2023. 3. 5.
[React Query] 캐싱 / useQuery의 생명주기 react query를 통해 관리하는 쿼리 데이터는 다음과 같은 다섯가지 상태를 가진다. fresh | 초록색 새로 추가된 쿼리이다. staleTime이 설정되어있다면 설정된 시간만큼 fresh 상태로 유지된다. staleTime이 설정이 안되어있다면 기본값이 0이기 때문에 fresh 직후에 stale 상태로 전환된다. fresh 상태일 때는 mount, update 시에 데이터를 재요청하지 않는다. fetching | 파란색 요청 상태인 쿼리이다. mount, update 시에 코드에 해당하는 데이터가 fetch 또는 refetch 된다. stale | 노란색 데이터가 fetching이 완료되어 만료됐다고 판단하는 쿼리이다. stale 상태인 쿼리를 재호출하면 캐싱된 데이터가 반환되기 때문에 새로운 값.. 2023. 3. 3.
[React] reactQuery queryKey와 queryFn의 관계, refetch() useQuery를 사용하면서 알게 된 몇가지 사실들! 1. queryKey와 queryFn의 관계 const { data: activeProjectsData } = useQuery({ queryKey: ['myProjects', filteredPidList], queryFn: getActiveProjects, staleTime: staleTime.myProjects, enabled: !!currentPidList, }); => queryKey에 있는 데이터를 queryFn이 매개변수로 사용할 수 있다. queryFn에 정의해준 함수에서 매개변수를 콘솔로 찍어보면 아래와 같이 객체가 찍히는 것을 알 수 있다. 이 객체 중 하나로 queryKey가 들어가기 때문에 이를 활용해서 함수 안에서 자유롭게 사용할 .. 2023. 3. 2.
[React] React 상태 관리 라이브러리 Recoil 리코일이란? 리코일(Recoil)은 React 상태 관리 라이브러리 중 하나이다. 리액트에서 상태를 관리하기 위해서는 일반적으로 상태를 컴포넌트 내부에서 관리하거나 Redux와 같은 라이브러리를 사용한다. 하지만 Redux는 보일러플레이트 코드가 많고, 컴포넌트와 액션 사이의 연결을 설정하는 작업이 번거로울 수 있다. 반면, 리코일은 상태를 단일 원천으로 중앙 집중적으로 관리하면서도 이러한 불편함을 해소한다. 리코일은 상태 값을 저장하고 업데이트하는 데 사용되는 atom과 여러 selector로 구성된다. atom은 원자적으로 업데이트 가능한 상태 값을 나타내며, selector는 atom을 기반으로 다른 값을 계산하는 데 사용된다. 리코일은 기존의 리액트 상태 관리 방법보다 더 직관적이고 간단하게 상태.. 2023. 3. 1.
[Develog] 좋아요 기능 구현2 이전 글 [Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬렉션(문서는 각 유저)으로 나눠져있고 좋아요로 증가 또는 감 subtlething.tistory.com React Query를 처음 쓰는데 생각보다 옵션들이 너무 많아서 제대로 활용하지 못하는 것 같았다. 그리고 내가 짰던 좋아요 로직에 대한 의심이 계속 들었던 와중에 좋아요가 적용이 안되는 오류가 발생했다. 그래서 하루종일 좋아요만 붙들고 수정했다. 커밋 링크 [PR] 프로젝트 상세보기 페이지 수정 by jeLee94 · Pull Request #261.. 2023. 3. 1.
[Develog] 좋아요 기능 구현(with firebase, useQuery, useMutation) 현재 데이터 구조상 모든 게시글을 저장하는 post 컬렉션(문서는 각 게시글 데이터)과 내가 좋아요한 게시글이 저장되는 myprojects 컬렉션(문서는 각 유저)으로 나눠져있고 좋아요로 증가 또는 감소한 숫자는 post 컬렉션의 like 필드에 저장되고 내가 좋아한 프로젝트는 myproject 컬렉션의 likedProjects 필드에 배열로 저장이된다. 1. 초안 처음에는 좋아요를 누를 때마다 데이터를 업데이트 해주는 방식으로 구현했다. 대신 데이터를 조회하는 건 초기 렌더링 한번만 할 수 있도록 했고 이 후 토글될 때 마다 클라이언트 사이드에서는 state로 상태를 관리할 수 있도록 했다. //api/projectDetail.tsx //좋아요 수 업데이트 export const updateLike =.. 2023. 2. 25.
[React] 서버 상태 관리 라이브러리 react-query의 개념과 useQuery, useMutation react-query 개념 react-query란? 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 서버 상태 관리 라이브러리 react-query를 사용하는 이유? 서버 데이터만 따로 관리하기 위해서! 기존의 redux와 같은 라이브러리들은 클라이언트 쪽 데이터를 관리하기 적합했지만 서버 쪽 관리에는 적합하지 않는 점들이 있었다. 기존에는 서버의 데이터와 클라이언트의 데이터가 공존하게 되고 그 데이터가 서로 상호작용하면서 섞여버린다. (예, 서버에는 이미 패치된 데이터가 저장되어 있고 클라이언트에는 패치되기 전 데이터가 유저에게 사용되고 있음) 기존 라이브러리들은 미들웨어를 통해 서버 데이트 관리를 할 수는 있지만 보일러 플레이트가 많아서 코드양이 많아지고 유지.. 2023. 2. 19.
[Develog] VS Code 꿀팁! 단축키 정리 변수나 단어 찾기, 바꾸기 Ctrl + F 현재 문서에서 일치하는 텍스트 찾기 Ctrl + Shift + F 전체 문서에서 일치하는 텍스트 찾기(현재 오픈돼있는 폴더) Ctrl + H 일치하는 텍스트 찾아 바꾸기 (Ctrl + Alt + Enter 모두바꾸기) 창 열기 닫기 Ctrl + ,(콤마) 설정창 열기 Ctrl + `(백틱) 터미널 열기/닫기 Ctrl + B 왼쪽 탐색기 창 끄기/ 켜기 Ctrl + '+' or '-' 폰트 사이즈 키우기/ 줄이기 Ctrl + Shift + P 확장 기능 선택하기 주석 처리하기 Ctrl + '/' 한 줄 또는 여러 줄 주석 처리하기 Alt + Shift + A 블록 주석 처리하기 이동하기 Ctrl + P 파일 이동하기 Ctrl + (← , →) 덩어리 단위로 커서 .. 2023. 2. 11.
[Develog] Craco란? Craco 설치 방법 Craco란? Create-React-App Configuration Override의 약어로, 말 그대로 CRA에 config 설정을 덮어쓰기 위한 패키지 Webpack의 번거로운 설정을 줄이기 위해 다양한 오버라이딩 패키지들이 등장했으며, 대표적으로 Craco, react-app-rewired 등이 있다. 일단 craco를 이해하려면 eject를 알아야 한다. CRA 즉 Create React App으로 프로젝트를 만들고 나면 최소한의 필요한 기능만으로 설정이 되어 있다. 이 때 package.json 파일에서 script 파일을 보면 eject 라는 명령어를 볼 수가 있다. "scripts": { "start": "react-scripts start", "build": "react-scripts b.. 2023. 2. 8.

티스토리툴바