react

React 19.2 커스텀 훅 네이밍 규칙 및 인식 원리

1️⃣ 문제 요약// 잘못된 예시 const { loading, menuRole } = UseMenuRole(); // 대문자로 시작 위와 같이 훅 이름을 대문자로 시작하면 React는 이 함수를 컴포넌트로 인식하지 훅으로 인식하지 않습니다.그 결과,useState, useEffect 등의 내부 상태 변화가 React 렌더링 사이클에 반영되지 않음setState()가 실행돼도 화면이 갱신되지 않음내부 상태(menuRole, loading)는 변하지만 UI는 그대로 멈춘 상태이런 현상이 발생합니다.2️⃣ React의 훅 인식 규칙React는 내부적으로 훅 호출을 추적할 때 다음과 같은 규칙을 사용합니다. React가 인식하는 대상예시컴포넌트대문자로 시작하는 함수function App(), function ..

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..