Rules of React

📌 Brief Summary

'Rules of React'는 리액트 컴포넌트가 렌더링 사이클에서 예측 가능한 동작을 하도록 보장하기 위해 준수해야 하는 엄격한 가이드라인입니다 [1]. 이 규칙의 핵심은 렌더링 중 불변성(immutability)을 유지하고 사이드 이펙트(side effects)를 발생시키지 않는 것입니다 [2]. 또한 훅(Hooks)을 조건문 없이 컴포넌트 최상단에서만 호출해야 한다는 'Rules of Hooks'를 포괄하며 [3], 최근의 React Compiler가 빌드 타임에 코드를 자동으로 최적화(메모이제이션)하기 위해서는 이 규칙의 엄격한 준수가 필수적입니다 [1].

📖 Core Content

렌더링의 예측 가능성 보장: 리액트 컴포넌트는 모든 렌더링에서 일관되고 예측 가능한 동작을 해야 합니다 [1]. 이를 위해 컴포넌트의 렌더링 과정은 사이드 이펙트 없이 순수(pure)해야 하며, 상태와 데이터의 불변성(immutability)을 철저히 지켜야 합니다 [2].
Rules of Hooks (훅의 규칙): 리액트의 상태와 생명주기를 다루는 훅 사용 시 반드시 지켜야 하는 핵심 세부 규칙입니다 [3].
- 최상단 호출: 훅은 항상 리액트 함수의 최상단(top level)에서만 호출되어야 합니다 [3].
- 조건부 호출 금지: 조건문, 루프(loops), 중첩된 함수 내부에서 무조건적으로 훅이 호출되어서는 안 됩니다 [3].
- 올바른 호출 위치: 일반 자바스크립트 함수 내에서는 훅을 호출할 수 없으며, 반드시 리액트 함수형 컴포넌트나 커스텀 훅(Custom Hooks) 내부에서만 호출해야 합니다 [3].
- 순서 일관성: 모든 렌더링에서 훅의 이름과 호출 순서가 동일하게 유지되어야 합니다 [3].
정적 분석 및 린팅(Linting) 도구의 활용: 'Rules of React' 위반을 방지하고 예측 가능한 코드를 강제하기 위해 정적 분석 도구를 사용해야 합니다 [1]. 특히 ESLint의 eslint-plugin-react-hooks 플러그인(recommended 또는 recommended-latest 프리셋)을 설정하여 빌드 전에 오류를 잡아내는 것이 권장됩니다 [1].
React Compiler와의 연관성: 2025년 기준 안정화된 React Compiler는 코드가 'Rules of React'를 따른다고 가정하고 작동합니다 [1]. 정적 분석을 통해 규칙을 준수하는 코드 요소(JSX, 훅 등)에 자동으로 세밀한 메모이제이션 로직을 주입합니다 [1, 4]. 만약 규칙을 위반한 코드가 발견되면, 컴파일러는 코드를 망가뜨리지 않기 위해 해당 부분의 최적화(auto-memoization)를 안전하게 건너뜁니다 [1, 5].

⚖️ Trade-offs & Caveats

'Rules of React'를 시스템적으로 강제할 때 직면하는 가장 큰 제약은 기술 부채가 쌓인 레거시 코드베이스(Legacy Codebases)에서의 도입 비용입니다 [6]. 기존의 대규모 프로젝트에는 컴포넌트 라이프사이클이나 훅 사용 시 'Rules of React'를 위반하는 코드가 여러 곳에 흩어져 있는 경우가 많습니다 [6]. 새로운 React Compiler를 도입해 자동 최적화 이점을 얻으려면, 컴파일러가 제대로 작동하기 전에 이러한 규칙 위반 사항을 모두 찾아내어 수정하는 대규모 리팩토링이 요구됩니다 [6]. 또한, 서드파티 라이브러리(예: TanStack Query, Material UI 등)가 렌더링마다 새로운 객체 참조를 반환하도록 설계된 경우, 컴파일러가 규칙에 기반하여 캐싱을 시도하더라도 이를 우회하여 불필요한 리렌더링을 유발할 수 있으므로, 여전히 수동 메모이제이션 훅을 조합해 사용해야 하는 한계가 존재합니다 [6, 7].

🔗 Knowledge Connections

[아키텍처/기반 기술]

React Compiler
- 연결 이유: React Compiler는 소스 코드가 'Rules of React'를 준수한다는 가정하에 빌드 타임 자동 메모이제이션을 수행하는 도구입니다 [1].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 규칙을 준수할 때 얻을 수 있는 구체적인 성능 향상(INP 개선 등)과 컴파일러의 세분화된 최적화 작동 원리를 이해할 수 있습니다 [4, 8].
Immutability & Side Effects
- 연결 이유: 'Rules of React'의 가장 핵심적인 근본 원칙이 바로 렌더링 중 불변성 유지와 사이드 이펙트 방지입니다 [2].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 왜 리액트가 렌더링을 예측 가능하게 유지해야 하며, 부수 효과가 렌더링 성능에 어떤 악영향을 미치는지 원론적으로 파악할 수 있습니다.

[구현/활용 도구]

eslint-plugin-react-hooks
- 연결 이유: 개발자가 실수로 'Rules of React'를 위반하지 않도록 정적 분석을 통해 경고하고 규칙을 강제하는 필수 ESLint 플러그인입니다 [1].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 린팅 도구가 컴파일 타임에 코드의 컨텍스트를 어떻게 분석하여 훅의 호출 순서와 조건부 실행을 막는지 실무적 관점에서 알 수 있습니다.
React Hooks
- 연결 이유: Rules of React의 가장 대표적인 하위 규칙인 'Rules of Hooks'의 직접적인 대상입니다 [3].
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 함수형 컴포넌트 내에서 상태(State)와 생명주기를 다룰 때 왜 최상단 호출 및 무조건적 호출이 필요한지 설계적 관점을 제공합니다 [3].

Deeper Research Questions

React Compiler는 정적 분석 과정에서 'Rules of React' 위반 여부를 구체적으로 어떻게 판별하며, 위반 시 컴파일러는 내부적으로 어떤 Fallback 전략을 취하는가?
레거시 애플리케이션에서 흩어져 있는 'Rules of React' 위반 코드를 React Compiler 친화적으로 리팩토링하기 위한 점진적 마이그레이션(Incremental Migration) 전략은 무엇인가?
훅(Hooks)의 내부 구현체 구조상, 호출 순서가 변경되거나 조건부로 호출될 때 리액트 엔진에서 정확히 어떤 메모리 참조 에러가 발생하는가?
eslint-plugin-react-hooks 플러그인은 정규 자바스크립트 함수와 커스텀 훅을 구문 분석 트리에 기반하여 어떻게 정확하게 식별해 내는가?
서드파티 라이브러리가 유도하는 규칙 위반(의도적인 불안정 참조 반환)과 React Compiler 간의 충돌을 해결하기 위한 최적의 우회(workaround) 패턴은 무엇인가?

Practical Application Contexts

Implementation: 리액트 함수형 컴포넌트를 작성할 때, 모든 useState, useEffect 등의 훅을 조건문이나 반복문 내부가 아닌 컴포넌트 최상단 계층에 선언하여 상태 관리 코드를 구현합니다 [3].
System Design: 애플리케이션의 렌더 트리 전반에서 순수성(purity)을 보장하기 위해 데이터 가공 및 부수 효과 발생 지점을 렌더링 사이클 밖(예: 이벤트 핸들러나 미들웨어)으로 분리하는 아키텍처를 설계합니다 [2].
Operation / Maintenance: CI/CD 파이프라인에 ESLint 설정을 통합하여 eslint-plugin-react-hooks를 통해 'Rules of React' 위반 코드가 프로덕션 브랜치에 병합(merge)되는 것을 자동화된 방식으로 차단합니다 [1].
Learning Path: 리액트 초심자가 함수형 컴포넌트를 학습할 때, 훅의 사용법보다 먼저 렌더링 원리와 'Rules of Hooks'를 학습하여 추후 발생할 수 있는 난해한 버그를 방지합니다 [3].
My Project Relevance: React Compiler를 적용하여 대규모 애플리케이션의 성능을 최적화하기 전, 기존 코드베이스 전반에 걸친 'Rules of React' 위반 사례들을 분석하고 이를 안전하게 리팩토링하는 기반 작업에 직결됩니다 [6].

Adjacent Topics

Automatic Memoization
- 확장 방향: 'Rules of React'를 준수함으로써 달성할 수 있는 React Compiler의 핵심 기능으로, 수동 메모이제이션(useMemo, useCallback)과의 성능 차이 및 추상화 원리를 심층적으로 비교합니다 [4, 8].
Technical Debt
- 확장 방향: 레거시 코드에서 규칙을 위반한 구조적 부채가 새로운 최적화 도구(React Compiler 등)의 도입을 어떻게 가로막고 유지보수 비용을 증가시키는지 탐구합니다 [6].

Last updated: 2026-04-30

8.5 KiB Raw Blame History