React

React 관련 포스트들입니다.

프론트엔드에서 원자성 보장하기 (feat. 대용량 데이터 배치 업로드)

413 Payload 에러 해결을 위한 이미지 압축, API 청크 분할, 부분 성공 복구 로직을 도입하며 프론트엔드에서 All or Nothing을 구현한 경험기

React

March 7, 2026

정적 좌표 지옥에서 탈출한 동적 별자리 노드 시스템 구축기

누비랩 냠냠플러스 "오늘찰칵" 서비스의 별자리 맵 시스템을 하드코딩된 좌표 대신 기하학 알고리즘과 Render Props 패턴으로 해결하며 유지보수성과 확장성을 확보한 경험을 공유합니다.

React

March 2, 2026

전역상태는 어떤 구조로 저장해야 좋을까? (Nested 한 전역상태에서 탈출하기)

전역상태를 그냥 하나의 JSON 객체로 관리하면 생기는 문제점과, Redux Toolkit 의 createEntityAdapter 를 사용하여 정규화된 전역상태를 관리하는 방법을 알아봅니다.

React

November 26, 2025

[번역] 왜 React Context 는 상태 관리 도구가 아니며 Redux 를 대체하지 않는가

이 글은 Mark Erikson의 "Why React Context is Not a 'State Management' Tool (and Why It Doesn't Replace Redux)" 을 기반으로 번역 및 보완한 글입니다. 저작권은 원문 저자에게 있습니다. 다소 의역이 포함되어 있을 수 있습니다.

React

November 19, 2025

리액트에서도 의존성 주입으로 결합도를 낮춰보자! - Renderer Props 패턴 (feat.DIP)

의존성 주입이 백엔드에서만 사용되는 패턴이라고? 리액트에서도 의존성 주입을 활용해 컴포넌트 간 결합도를 낮추고 재사용성을 높여보자! Renderer Props 패턴을 의존성 주입과 OCP, DIP 원칙과 연결지어 알아봅니다

React

November 1, 2025

[Redux 공식문서 번역] 전역상태를 어떻게 설계해야 할까? - Normalizing State Shape

Redux 애플리케이션에서 상태 구조를 정규화하는 방법에 대해 알아봅니다. 이 글은 Redux 공식 번역이 아니며, 개인 학습 및 공유 목적으로 작성된 비공식 번역입니다. (원문 : https://redux.js.org/usage/structuring-reducers/normalizing-state-shape)

React

October 31, 2025

Isomorphic 이란 뭐고 어떨때 사용하는 네이밍일까 ? (feat. useIsomorphicEffect 는 뭘까)

오픈소스를 보다보면 Isomorphic 이라는 단어를 마주치게 됩니다. Isomorphic 이란 무엇인지, 그리고 어떨때 사용하는 네이밍인지에 대해 알아봅니다. 또 리액트에서 자주 사용되는 useIsomorphicEffect 훅도 함께 살펴봅니다.

React

October 29, 2025

[커리어핏] React 렌더링 최적화 분투기 (useState 에서 useRef, 그리고 EventBus 아키텍쳐까지)

React에서 상태 관리를 위해 useState 대신 useRef를 사용하여 불필요한 리렌더링을 줄이고, EventBus 아키텍쳐를 도입하여 컴포넌트 간의 효율적인 통신 방법을 알아봅니다.

React

September 25, 2025

react-toastify 는 어떻게 리액트 렌더링사이클 밖에서도 토스트를 띄울수 있을까?

리액트에서 상태 관리와 렌더링은 보통 컴포넌트 내부의 state, props를 통해 이루어진다. 그런데 진짜 실무에서는 "리액트 컴포넌트 바깥"에서, 즉 비동기 로직이나 이벤트 핸들러, API 응답 등 어디서든 토스트(알림)를 띄우고 싶을 때가 많다. 어떻게 그게 가능할까?

React

September 21, 2025

뭐? Context 가 복사가 된다고? (Context Provider Hell 해결하기)

React Context API를 사용할 때 발생할 수 있는 'Context Provider Hell'이 무엇인지, 그리고 이를 해결하기 위해 접근한 방법에 대해 설명합니다.

React

July 23, 2025

엥? Modal 그거 z-index:99999 박으면 되는거 아님? (feat. createPortal과 Stacking Context)

React 에서 Modal 컴포넌트를 구현할때 단순히 z-index 를 높게 줬을때 발생하는 문제와 createPortal 을 이용해 해결하는 방법에 대해 알아봅니다.

React

June 27, 2025

React로 무한 스크롤 구현하기 (Intersection Observer 활용)

React와 Intersection Observer API를 활용해 성능 최적화된 무한 스크롤을 구현하는 방법을 알아보겠습니다. 페이지네이션의 종류부터 커스텀 훅까지 단계별로 설명합니다.

React

November 15, 2024

React Transition Group 뜯어보기

디자인학과 졸업전시 사이트를 만들면서 React Transition Group 을 통해 DOM 개수를 줄여보면서 React Transition Group 은 어떻게 동작하는지 살펴보았습니다.

React

October 15, 2024

Redux 핵심 개념과 Flux 아키텍쳐

Redux의 핵심 개념과 Flux 아키텍처에 대해 알아봅니다. MVC, MVVM, Container-Presenter 패턴과 비교하며 Redux가 어떻게 상태 관리를 단순화하는지 알아봅니다.

React

September 10, 2024