React의 규칙
각 프로그래밍 언어마다 개념을 표현하는 고유한 방식이 있듯이, React에도 패턴 이해를 쉽게 하며 고품질의 애플리케이션을 만들 수 있게 하는 일종의 규칙 혹은 모범적인 방식이 있습니다.
이 섹션에서는 모범적인 React 코드를 작성하기 위한 규칙을 설명합니다. 모범적인 React 코드를 작성하면 애플리케이션을 체계적으로 조직하고 안전하며 쉽게 구성할 수 있습니다. 이러한 특성은 애플리케이션이 변화에 더 잘 대처할 수 있게 하고 다른 개발자나 라이브러리, 도구와의 협업을 더 원활하게 합니다.
이러한 규칙을 React의 규칙이라고 합니다. 이는 단순한 지침이 아니라 규칙으로, 이를 어길 경우 애플리케이션에 버그가 생길 가능성이 높으며 코드가 일반적이지 않게 변해 이해하기 어렵고 논리적으로 설명하기 힘들어집니다.
코드베이스가 React의 규칙을 따르도록 하기 위해 React의 ESLint 플러그인과 함께 Strict Mode를 사용하는 것을 강력히 권장합니다. React의 규칙을 따르면 버그를 찾아 해결할 수 있으며 애플리케이션의 유지 보수성을 높일 수 있습니다.
컴포넌트와 Hook은 순수해야 합니다
컴포넌트와 Hook의 순수성은 React의 주요 규칙으로, 이를 통해 앱이 예측 가능하고 디버깅이 쉬워지며 React가 코드를 자동으로 최적화할 수 있습니다.
- 컴포넌트는 멱등해야 합니다 – React 컴포넌트는 항상 입력 값(Props, State, Context)에 따라 동일한 출력을 반환한다고 가정합니다.
- 사이드 이펙트는 렌더링 외부에서 실행되어야 합니다 – 사이드 이펙트는 React가 최상의 사용자 경험을 제공하기 위해 컴포넌트를 여러 번 렌더링할 수 있기 때문에 렌더링 중에 실행되어서는 안 됩니다.
- Props와 State는 불변입니다 – 컴포넌트의 Props와 State는 단일 렌더링에 대한 불변의 스냅샷입니다. 절대 이를 직접 변경하지 마세요.