# [[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

### Related Concepts

#### [아키텍처/기반 기술]
- [[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*