React

React 관련 포스트들입니다.

Storybook MCP 로 컴포넌트 문서화를 자동화하고 AI Context로 활용하기

생성형 AI 가 발전함에 따라 MCP(Model Context Protocol)라는 새로운 개념이 등장했습니다. Storybook 에도 MCP 가 존재하는데, 이를 활용하면 컴포넌트 문서화를 자동화하거나, 컴포넌트 사용법을 AI 가 이해하고, context 로 활용할 수 있습니다.

React

February 3, 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

리액트에서 고차컴포넌트(HOC)로 횡단 관심사를 처리해보자 (feat. AOP - 관점지향 프로그래밍)

리액트에서 고차컴포넌트(HOC)를 사용하여 횡단 관심사를 효과적으로 처리하는 방법에 대해 알아봅니다. 관점지향 프로그래밍(AOP)의 개념을 도입하여 코드의 재사용성과 유지보수성을 향상시키는 방법을 알아봅니다

React

October 30, 2025

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

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

React

October 29, 2025

DIY React 1 - JSX 마크업을 Virtual DOM 객체로 변환하기

React의 핵심 개념과 동작 원리를 이해하기 위해, React를 직접 구현해보는 시리즈의 첫 번째 글입니다. 이번 글에서는 JSX 마크업을 Virtual DOM 객체로 변환하는 과정을 다룹니다.

React

October 7, 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

React 는 항상 단방향으로 데이터가 흐를까? (useImperativeHandle)

React 는 항상 데이터가 단방향으로 흐를까요? React 의 useImperativeHandle 훅을 사용하여 부모 컴포넌트가 자식 컴포넌트의 메서드나 속성에 접근하는 방법에 대해 알아봅니다

React

June 10, 2024