react

useDeferredValue 와 useTransition 차이

useDeferredValue는 상태 값의 지연 렌더링을 처리하고 useTransition은 함수 실행과 연관된 작업들을 비동기적으로 처리합니다. React의 비동기 렌더링 기능 을 활용하여 성능 최적화와 사용자 경험 개선에 기여합니다.1. useDeferredValue상태 값(state)의 업데이트를 지연시킵니다.사용 사례: 상태 값이 즉시 변경되더라도, 비동기 작업이 완료될 때까지 렌더링을 지연 처리하고 싶을 때 사용합니다.작동 방식:특정 상태 값이 실제 값보다 늦게 업데이트되도록 만들어 렌더링을 지연시킵니다.React의 비동기 렌더링을 활용하여 성능을 최적화합니다.컴포넌트 로딩 구현import { Suspense, useState, useDeferredValue } from 'react';expor..

React 19 Data Caching (map, React Query, swr)

Map 객체를 활용한 데이터 캐싱요청했던 URL과 데이터를 Map에 저장하므로 동일한 요청은 서버에 다시 호출하지 않고, 저장된 데이터를 반환합니다.data.jsimport { axios } from "./axios.js";let cache = new Map();export function fetchData(url) { if (!cache.has(url)) { cache.set(url, getData(url)); } return cache.get(url);}async function getData(url) { if (url.startsWith("/search?q=")) { return await getSearchResults(url.slice("/search?q=".length)); ..

React Suspense와 use로 빈 데이터 문제 해결하기

부모 컴포넌트가 서버 데이터를 요청하고 이를 자식 컴포넌트로 내려주는 경우, 데이터가 로드되기 전에 자식 컴포넌트가 빈 상태나 기본값으로 렌더링될 수 있습니다. 이는 불필요한 useEffect 사용이나, 자식 컴포넌트에서 동일 데이터를 다시 요청해야 하는 비효율적인 상황을 초래합니다. Suspense와 use를 활용하면, 데이터가 준비될 때까지 로딩 컴포넌트를 표시하고, 데이터를 수신한 후에 자식 컴포넌트를 렌더링하는 방식으로 이 문제를 해결할 수 있습니다.Suspense란?비동기 데이터가 로드될 때까지 컴포넌트 렌더링을 일시 중단하고, 로딩 중임을 표시하는 UI를 보여주는 기능입니다. fallback 속성은 로딩 중에 보여줄 컴포넌트를 지정합니다.use란?Promise를 처리하고 데이터를 동기적으로 사..

useEffect no dependency

💡의존성 배열 전달 안할 시 모든 상황에서 실행되기에 불필요한 상황에서 실행될 가능성이 농후하므로 일반적으로 의존성 배열을 지정한다. 매개변수 / 의존성 컴포넌트가 DOM에 추가되면 실행되는 셋업 함수 컴포넌트가 DOM에 제거되면 실행되는 클린업 함수 (+의존성이 변경 되어 리렌더링 할 때) 셋업 함수 내 참조된 모든 변수와 함수로 의존성 변경시 리렌더링 과정을 거친다. useEffect(() => { //셋업 함수부 console.log('setup'); return () => { //클린업 함수부 console.log('cleanup'); } }, [의존성...]); useEffect 로직 기본 기본 컴포넌트 추가 > 셋업 함수 클린업 함수 추가 컴포넌트 추가 > 셋업 함수 > 컴포넌트 제거 > 클린..

Dynamic Import / Lazy Loading - 코드 스플리팅[Code Splitting]

코드 스플리팅 코드를 다양한 번들로 분할하고, 요청에 따라 로드하여 사용자가 필요할 때에 필요한 코드만 사용할 수 있습니다. 더 작은 번들을 만들고 리소스 우선순위를 올바르게 제어하기 위해서 사용하며, 잘 활용하면 SPA의 단점인 로딩 시간을 절약할 수 있습니다. Dynamic Import (동적 불러오기) 모듈 내에서 인라인 함수 호출을 통해 코드를 분할합니다. App.tsx function App() { const test = () => { import('./common/test').then(test => { console.log(test.text()); }); }; return test()}>Dynamic Import Button; } test.ts export const text = () => {..

Compound Component 패턴

React Bootstrap과 동일한 패턴을 작성하고 싶었다. # 문제점 이전 컴포넌트의 구성은 ModalBody의 children을 제외한 Header[Title], Footer이 파라미터로 들어가 정해진 구성으로 들어가 일관성 있는 UI를 나타낼 수 있지만 다른 구성 및 스타일로 바꾸기 힘들고 하나의 컴포넌트가 많은 파라미터를 받아 해당 파라미터가 어디에 관련이 있는지 알기 어렵다. 모달입니다. 장점 자유롭게 컴포넌트를 구성 및 스타일 변경이 가능하다. 서브 네임으로 구획을 정확히 나눌 수 있다. 서브 컴포넌트의 파라미터 배분으로 정갈한 코드를 작성할 수 있다. 단점 자유도가 높은 만큼 사용자가 컴포넌트 구성의 이해가 필요하고 예상하지 못한 동작이 일어날 가능성이 있다. # Compound Compo..

React createPortal(Modal Component)

# 문제점 모달을 컴포넌트로 만들고 상태 공유를 위해 부모 컴포넌트에 작성 시 문제 야기 상위 컴포넌트의 필요없는 스타일 반영 최상위로 띄우기 위해 무분별한 z-index 사용 //Another.tsx { const contextValue = { open, handleClose }; return ( {open && ( {children} )} ); }; # createPortal(children, domNode, [key]) 컴포넌트를 root가 아닌 DOM의 다른 부분에 렌더링 DOM 노드의 물리적 배치만 변경하므로 상위 컴포넌트의 React 구성 요소의 하위 컴포넌트로 구성 그러기에 자식은 부모가 제공하는 컨텍스트, 상태, 이벤트에 액세스 할 수 있다. const Modal = ({ open, han..

React Route dom v6 하위 경로 이동 시 에도 인덱스 NavLink 활성화

1. 원하는 작동 방식 MemberDetail페이지 진입 시 MyPost컴포넌트가 Index로 렌더링 되고 각각의 NavLink가 URL에 따라 활성화 작성 글 작성 댓글 내 글 반응 내 정보 수정 하지만 위와 같은 코드는 MemberDetail 진입 시에는 작동을 했지만 하위 경로로 이동 시 인덱스와 선택된 하위 경로 모두 활성화되는 결과를 가져왔다. 2. 해결 방법 NavLink end NavLink의 매개변수 중 하나인 “end”를 사용하여 해결하였다. 작성 글 작성 댓글 내 글 반응 내 정보 수정 NavLink to경로의 마지막이 일치하면 active , pending 상태를 활성화 시킨다. 링크 URL 활성 /tasks 진실 /tasks/123 진실 /tasks 진실 /tasks/123 거짓

React Jest user-event FireEvent

fireEvent / user-event 14버전으로 진행할 예정인데 13버전과 14버전은 상당히 다르기 때문에 유의바랍니다. fireEvent는 DOM 이벤트를 디스패치하고 user-event는 모든 상호 작용을 시뮬레이션합니다. https://ph-fritsche.github.io/blog/post/why-userevent Why you should test with user-event Choosing the right developing tools for your project can be a daunting task. Here's why user-event should be one of them. ph-fritsche.github.io fireEvent는 이벤트를 트리거 하지만 user-event..

Testing React with Jest and React Testing Library - 2

간단한 어플리케이션 테스트 import { fireEvent, render, screen } from "@testing-library/react"; import { logRoles } from "@testing-library/react"; import App from "./App"; import { replaceCamelWithSpaces } from "./App"; test("button has correct initial color and updates when clicked button", () => { const { container } = render(); logRoles(container); // 이름이 'Change to blue'인 버튼 요소 찾기 const colorButton = scr..