React (14) 썸네일형 리스트형 React의 상태 비교와 setState() React는 성능 때문에 참조(주소)만 비교한다. 즉, 상태가 변경되었는지 확인할 때 깊은 비교를 하지 않고, 참조를 기준으로만 확인한다.즉, 상태가 이전과 같은 객체나 배열을 참조하고 있으면 변경 없음이라고 판단해서 리렌더링 하지 않는다. 반대로, 같은 내용을 가진 객체라도 새로운 객체를 만들어 넣으면 참조가 달라졌다고 판단해서 리렌더링이 일어난다.예를 들어, 아래의 코드를 비교해보자.// 잘못된 방식 ❌ (원본 객체 수정)setState(prev => { prev.value = 2; // 기존 객체를 직접 수정 return prev; // 같은 참조 반환});// 올바른 방식 ✅ (새 객체 생성)setState(prev => { return { ...prev, value: 2 }; //.. useMemo()에서 dependency 배열을 잘못 관리했을 때 발생하는 문제 React에서 useMemo를 사용할 때 dependency 배열을 어떻게 관리하느냐는 단순한 성능 최적화 문제를 넘어 데이터의 최신 상태를 반영할 수 있느냐 없느냐와 직결된다는 것을 배웠다. 예를 들어 이런 코드가 있다고 하자.const selectedDataWarehouseTable = useMemo( () => (dataWarehouseTablesData ?? []).find( (t: any) => t.id === selectedDataWarehouseTableId ), [selectedDataWarehouseTableId] // ❌ dataWarehouseTablesData 빠짐); 겉보기엔 잘 동작하는 것처럼 보인다. 특히 Next.js에서 다른 페이지로 갔다가 다시 돌아올 경우, 컴.. React Query의 retry 기능 React query를 사용한 fetching에서 에러가 났는데, api 요청이 계속 되었다. 한번 실패하면 isError가 true가 되어서 요청을 멈춰야 한다고 생각했는데, react query의 retry 기능 때문이었다. React Query는 기본적으로 retry를 3번 한다고 한다.useQuery({ queryFn: ..., retry: 3, // ✅ 기본값이 3}); 이 동안 isLoading === true, isError === false인 상태이고, retry가 모두 끝난 뒤에 isError === true도 바뀐다.재시도와 재시도 간격도 지정할 수 있다.export function useGraph(schema: any) { return useQuery({ quer.. react-intersection-observer를 활용한 이미지 최적화 https://www.npmjs.com/package/react-intersection-observer 웹 성능 최적화에서 중요한 요소 중 하나가 바로 이미지 로딩 방식이다. 특히 사용자가 스크롤을 내리기 전에 보이지 않는 이미지를 미리 로딩하지 않도록 하는 최적화 방법이 필요하다. 이를 위해, react-intersection-observer를 활용하여 지연 로딩을 적용했고, 이로써 불필요한 네트워크 요청을 줄이고 성능을 향상시킬 수 있었다.react-intersection-observer란?Intersection observer API를 react에서 쉽게 사용할 수 있도록 만든 라이브러리이다. 특정 요소가 뷰포트에 들어왔는지를 감지할 수 있고, 이를 활용하여 이미지나 콘텐츠가 사용자에게 보일 때 로.. React query 적용 구조적 패턴 저번에 react query를 써보고 포스팅을 한번 했었다. 이번에는 왜 해당 기술을 써야 하는지와 더 좋은 적용 구조적 패턴에 대해 알게 되어서 다시 정리를 해보려고 한다. 우리는 일반적으로 API 호출을 할 때 아래와 같이 구현할 것이다. 그렇지만, 이로 인한 문제점도 분명히 존재한다.일반적인 API 호출 처리loading, error 처리를 위한 state 값 선언과 값에 따른 분기 처리가 필요하다.API 호출이 여러개 이루어질 경우, state 선언이 n개 늘어나게 된다. ex) isWebtoonLoading, isNewsLoadingimport { useEffect, useState } from 'react';function App() { const [list, setList] = useSta.. React portal https://ko.legacy.reactjs.org/docs/portals.html React portal이란?리액트에서 일반적으로 컴포넌트는 부모 요소 안에 렌더링된다. 하지만 Portal을 사용하면 특정 DOM 요소에 렌더링할 수 있다. 즉, JSX 구조상으로는 부모 안에 있지만, 실제 DOM에서는 완전히 다른 곳에 렌더링 되도록 하는 것이다. 왜 필요할까?예를 들어보자. 기본적으로 modal, tooltip 같은 UI 요소는 화면 최상단 레이어에 떠야 한다. 그런데 부모 컨테이너가 overflow:hidden과 같은 스타일이 적용되면 잘려서 보이지 않는 문제가 발생할 수 있다. 이런 문제를 portal로 해결할 수 있다. 코드로 살펴보자먼저, 두가지 상황을 코드로 구현한 것이다. 한개의 modal.. 합성 컴포넌트 적용하기 디자인시스템 modal을 만들다가 합성 컴포넌트에 대해 알게 되었다. 합성 컴포넌트(Composition Component)란?합성 컴포넌트 패턴은 하나의 컴포넌트를 여러 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미한다. 합성 컴포넌트를 사용하지 않는 경우 발생하는 props drilling 합성 컴포넌트를 사용하지 않으면, props를 사용하여 UI를 구성한다. 하지만 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터가 많아지면 props drilling 현상이 발생할 수 있다.예를 들어, 디자인시스템 modal 구현 상황을 예로 들어보자. 우리는 아래와 같이 다양한 모달들을 구현할 수 있는 디자인시스템 제작이 필요한 상황이다. 구성요소는 크게 Hea.. Error Boundary란 무엇일까? https://ko.legacy.reactjs.org/docs/error-boundaries.html 에러 경계라는 새로운 개념에 대해 알게 되었다. 신기한 개념이라 정리해보았다.개념Error Boundaries라는게 뭘까? UI의 일부분에 존재하는 자바스크립트 에러가 전체 어플리케이션을 중단시켜서는 안된다. 하지만 과거에는 컴포넌트 내부의 자바스크립트 에러를 정상적으로 처리할 수 있는 방법이 없었다. 이를 위해 React 16에서 에러 경계라는 새로운 개념이 도입되었다. 즉, 에러 경계는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트이다. 구현 방법import React, { Component } from "react";/.. 이전 1 2 다음
