docs: 리액트 aop, cross-cutting concern 초안

Author: toothlessdev

contents/posts/React/react-aop-hoc.md

@@ -0,0 +1,52 @@
+---
+title: "리액트에서 고차컴포넌트(HOC)로 횡단 관심사를 처리해보자 (feat. AOP - 관점지향 프로그래밍)"
+createdAt: 2025-10-30
+category: React
+description: 리액트에서 고차컴포넌트(HOC)를 사용하여 횡단 관심사를 효과적으로 처리하는 방법에 대해 알아봅니다. 관점지향 프로그래밍(AOP)의 개념을 도입하여 코드의 재사용성과 유지보수성을 향상시키는 방법을 알아봅니다
+comment: true
+head:
+    - - meta
+      - name: keywords
+        content: 리액트, React, 고차컴포넌트, HOC, 관점지향 프로그래밍, AOP, 횡단 관심사, 코드 재사용성, 유지보수성, 프론트엔드 개발
+---
+
+:::warning
+아직 작성중이거나 검토중인 글입니다. 내용이 부정확하거나 변경될 수 있습니다
+:::
+
+프론트엔드 개발에서 컴포넌트 마다 하고싶은 비즈니스 로직은 전부 다르다. `<OrderPage/>` 는 주문정보를 보여주고, `<ProfilePage/>`는 사용자 정보를 보여주고 ....
+
+그런데, 이런 컴포넌트들이 공통적으로 해야하는 일이 있습ㄴ다
+
+예를들어,
+
+- 로그인 하지 않은 사용자는 이 페이지에 접근할 수 없어
+- 이 버튼 클릭은 Analytics 에 로깅을 해야해
+- 이 API 호출은 에러가 나면 공통 에러 처리 로직을 타야해
+
+아까의 예시에서 `<ProfilePage/>` 의 "인증 확인 로직"은 "프로필 정보를 보여주는 로직"과는 전혀 상관이 없는데, 이런 공통 관심사를 컴포넌트마다 매번 작성하다보면 코드가 중복되고, 유지보수가 어려워집니다
+
+이렇게 여러 기능, 모듈을 가로지르면서 공통적으로 필요한 요구사항을 `횡단 관심사(cross-cutting concerns)` 라고 부릅니다
+
+## 🚶‍♂️ 횡단 관심사 (cross-cutting concerns) - 핵심 로직 vs 끼어드는 로직
+
+프로필 페이지를 한번 들여다보자
+
+```tsx
+function ProfilePage() {
+    useEffect(() => {
+        if (!isLoggedIn()) {
+            redirectToLogin();
+        }
+    }, []);
+
+    return <div>프로필 정보</div>;
+}
+```
+
+이 컴포넌트의 원래 관심사는 "프로필 정보를 보여주는 것" 입니다 <br/>
+"로그인 여부 확인" 은 핵심 관심사가 아닙니다
+
+이런 친구들은 다른 페이지/컴포넌트 등 앱 전반에 걸쳐서 반복적으로 나타납니다
+
+그래서 이걸 가로로 깔려있는 관심사, `횡단 관심사(cross-cutting concerns)` 라고 부릅니다.