노트

React로 보는 SOLID

SOLID Principles in React

프런트엔드#react#pattern · 연결된 개념 8개

쉽게 말하면

React로 보는 SOLID는 레고 블록을 잘 나누는 다섯 가지 요령이에요. 한 블록엔 한 역할만 주고, 원래 블록을 깎지 말고 덧붙이고, 같은 규격이면 바꿔 끼울 수 있게 해요. 그러면 고칠 때 다른 곳이 덜 무너져요.

비유가 깨지는 곳 블록을 너무 잘게 쪼개면 오히려 조립도를 읽기 어려워요. 작은 컴포넌트와 추상화가 넘치지 않게, 실제로 변경이 생길 때 나누는 편이 나아요.

SOLID는 원래 객체 지향 설계 원칙이지만 React 컴포넌트·props·훅에도 그대로 옮겨 볼 수 있다. 원칙 자체보다 "어떤 코드 모양이 되는가"를 짧게 정리한다.

  • 단일 책임(Single Responsibility, S): 데이터 요청, 날짜 포맷, 목록 렌더를 한 컴포넌트에 몰지 않는다. useUserData() 훅 + UserInfo + PostList로 나누면 바뀌는 이유가 하나씩 남는다
  • 개방-폐쇄(Open-Closed, O): 기본 Button을 고치지 않고 감싸서 IconButton·PrimaryButton을 만든다. renderActions 같은 슬롯(Render Props 패턴)도 확장 지점이다
  • 리스코프 치환(Liskov Substitution, L): TextInput·NumberInput이 BaseInput과 같은 props 계약(value, onChange)을 지키면 어디서든 바꿔 끼울 수 있다(리스코프 치환 원칙)
  • 인터페이스 분리(Interface Segregation, I): 쓰지도 않는 props를 잔뜩 요구하는 UserCard 대신 UserAvatar·UserStats처럼 필요한 것만 받는 작은 컴포넌트를 조합한다
  • 의존성 역전(Dependency Inversion, D): 컴포넌트가 fetch('/api/user')를 직접 부르지 않고, 주입받은 fetcher나 Context로 받은 서비스에 의존한다. API(Application Programming Interface), 로컬 저장소, 테스트 대역을 바꿔 끼울 수 있다(의존성 역전 원칙, 의존성 주입 (DI))

과하게 적용하면 작은 컴포넌트와 추상화가 넘쳐 오히려 읽기 어렵다. 실제로 변경이 생길 때 나누는 편이 낫다(YAGNI, 3의 법칙). 프런트 코드 품질 기준은 변경하기 쉬운 프런트엔드 코드.

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • React의 규칙과 렌더 순수성

    Rules of React는 React가 올바르게 동작하고 최적화하기 위해 코드가 지켜야 하는 규칙으로, 공식 문서가 세 가지로 정리한다. 핵심은 렌더가 순수한 계산이어야 한다는 것이다.

  • React Compiler

    React Compiler는 빌드 타임에 컴포넌트와 훅을 분석해 메모이제이션(Memoization) 코드를 자동으로 넣어 주는 컴파일러다. 개발자가 손으로 붙이던 useMemo·useCallback·memo를 대신한다. 2025년 10월 1.0이 나왔다.

  • Vue 3와 React 대응표

    React에 익숙한 개발자가 Vue 3(Composition API, script setup)를 빠르게 읽을 수 있게 짝지어 본 표. 가장 큰 차이는 Vue는 반응성(Reactivity)을 자동으로 추적해서 의존성 배열(Dependency Array)이 없다는 점이다.

  • Redux 이후의 상태 관리 선택

    한때 React 앱의 기본값이던 Redux는 2025~2026년 기준으로 여러 선택지 중 하나가 됐다. 상태를 종류별로 나눠 각자에 맞는 도구를 고르는 방식이 자리 잡았기 때문이다.

  • 상태 내리기와 컴포지션으로 리렌더 줄이기

    상태 내리기(State Colocation)는 state를 실제로 쓰는 컴포넌트 가까이로 옮겨, state가 바뀔 때 다시 렌더되는 범위를 좁히는 기법이다. 메모이제이션(Memoization)보다 먼저 시도할 구조적 최적화다.

보기 옵션