관심사 분리

하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(concerns)을 부여하게 되면 그 코드를 읽는 사람은 혼란스러울 수 있다.

가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 것이다. 즉, 코드는 단위 별로 하나의 관심사만 갖도록 하고 그 관심사에 대해서만 충실히 동작하도록 만들어야 한다.

그렇게 되면 어떤 문제가 생겼을 때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게 되고, 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결할 수 있다.

또한 하나의 수정사항으로 인해 전체가 수정되는 것이 아니라, 해당 사항이 있는 일부분만 변경시키기 때문에 변화에 대해서도 내구성을 갖추게 된다.

컴퓨터 공학에서는 이렇게 '한번에 한 가지만 걱정해도 괜찮도록' 각각의 관심사에 따라 코드를 분리하는 기법을 관심사의 분리 라고 부른다.

관심사의 분리가 적절히 구현된 코드에서는 Loose Coupling (낮은 결합도, 각각의 코드가 서로 얽혀있지 않고 독립적으로 잘 분리되어 있음)과 High Cohesive (높은 응집도, 유사한 내용끼리 비슷한 위치에 잘 모여 있음)와 같은 특성을 발견할 수 있다.

관심사의 분리 장점

코드가 더욱 명료해짐 : 자신이 어떤 일을 하고, 어떤 목적을 가지고 설계된 코드인지 보다 잘 드러나게 됨.

코드 재사용성이 올라감 : 여러 역할이 엉켜있는 코드보다, 역할 별로 잘 분리되어 있는 코드를 재사용하기가 쉬움.

유지 보수가 용이함 : 변경 사항이 발생했을 때 해당 관심사에 연관된 코드만 수정하면 됨.
테스트 코드를 작성하기 쉬워짐 : 얽혀있는 로직보다 분리되어 있는 로직에 대한 테스트가 보다 더 간단해짐

예시(폴더트리)

위 폴더트리를 예로들자면 각각의 폴더들이 역할별로 나뉘어져 있다

• components -> 페이지를 구성할 컴포넌트 들이 담긴 폴더
• modules -> Redux 관련 요소들이 담긴 폴더
• pages -> 컴포넌트들이 모여 실제로 렌더링 되어질 페이지들이 담긴 폴더(상태, hooks, 함수, 기능구현은 컴포넌트단 에서 작성)
• routers -> 라우팅 관련 요소들이 담긴 폴더
• services -> fetch, axios 등 api통신 관련 요소들이 담긴 폴더

이렇게 나눠서 관리하게되면 각 컴포넌트 단 에서 기능구현시 한 파일에서 전부 작성하지 않고 필요한 부분들만 import 해서 작성할 수 있다(관심사의 분리 장점을 이용할수 있음)

관심사 분리가 제대로 되지 않는다면?

• 기능 하나의 오류로인해 전체 페이지가 망가질수 있다
• 유지보수가 어렵다 -> 한눈에 파악이 힘들기때문에 디버깅에 시간과 인력이 소모
• 재사용성이 떨어짐