WARNING

아직 작성중이거나 검토중인 글입니다. 내용이 부정확하거나 변경될 수 있습니다

프론트엔드 개발에서 컴포넌트 마다 하고싶은 비즈니스 로직은 전부 다르다. <OrderPage/> 는 주문정보를 보여주고, <ProfilePage/>는 사용자 정보를 보여주고 ....

그런데, 이런 컴포넌트들이 공통적으로 해야하는 일이 있습ㄴ다

예를들어,

• 로그인 하지 않은 사용자는 이 페이지에 접근할 수 없어
• 이 버튼 클릭은 Analytics 에 로깅을 해야해
• 이 API 호출은 에러가 나면 공통 에러 처리 로직을 타야해

아까의 예시에서 <ProfilePage/> 의 "인증 확인 로직"은 "프로필 정보를 보여주는 로직"과는 전혀 상관이 없는데, 이런 공통 관심사를 컴포넌트마다 매번 작성하다보면 코드가 중복되고, 유지보수가 어려워집니다

이렇게 여러 기능, 모듈을 가로지르면서 공통적으로 필요한 요구사항을 횡단 관심사(cross-cutting concerns) 라고 부릅니다

🚶‍♂️ 횡단 관심사 (cross-cutting concerns) - 핵심 로직 vs 끼어드는 로직

프로필 페이지를 한번 들여다보자

function ProfilePage() {
    useEffect(() => {
        if (!isLoggedIn()) {
            redirectToLogin();
        }
    }, []);

    return <div>프로필 정보</div>;
}

이 컴포넌트의 원래 관심사는 "프로필 정보를 보여주는 것" 입니다
"로그인 여부 확인" 은 핵심 관심사가 아닙니다

이런 친구들은 다른 페이지/컴포넌트 등 앱 전반에 걸쳐서 반복적으로 나타납니다

그래서 이걸 가로로 깔려있는 관심사, 횡단 관심사(cross-cutting concerns) 라고 부릅니다.