관심사의 분리 (Separation of Concerns)
하나의 함수, 변수, 클래스, 컴포넌트에게 한번에 너무 많은 일(걱정)을 부여하게 되면 그 코드를 읽는 사람은 쉽게 혼란에 빠지게 됩니다.
가장 간단한 해결책은 한번에 한 가지 걱정만 하도록 단위를 잘게 나누는 겁니다. 바꿔 말하면, 우리의 코드가 단위 별로 하나의 관심사만 갖도록 하고 그 관심사에 대해서만 충실히 동작하도록 만들어야 한다는 뜻입니다.
그렇게 되면 어떤 문제가 생겼을 때 전체 기능을 파악하기 위해 읽어야 하는 코드의 단위가 줄어들게 되고, 코드에 대한 파악이 빨라지므로 문제를 효과적으로 해결할 수 있게 됩니다. 우리가 그간 이야기 해왔던 Divide & Conquer (분할 - 정복)이 보다 쉬워지는 것이죠.
또한 하나의 수정사항으로 인해 전체가 수정되는 것이 아니라, 해당 사항이 있는 일부분만 변경시키기 때문에 변화에 대해서도 내구성을 갖추게 됩니다.
컴퓨터 공학에서는 이렇게 '한번에 한 가지만 걱정해도 괜찮도록' 각각의 관심사에 따라 코드를 분리하는 기법을 관심사의 분리 라고 부릅니다.
관심사의 분리가 적절히 구현된 코드에서는 Loose Coupling (낮은 결합도, 각각의 코드가 서로 얽혀있지 않고 독립적으로 잘 분리되어 있음)과 High Cohesive (높은 응집도, 유사한 내용끼리 비슷한 위치에 잘 모여 있음)와 같은 특성을 발견할 수 있습니다.
관심사의 분리에는 여러 가지 장점이 있습니다.
- 코드가 더욱 명료해짐 : 자신이 어떤 일을 하고, 어떤 목적을 가지고 설계된 코드인지 보다 잘 드러나게 됨.
- 코드 재사용성이 올라감 : 여러 역할이 엉켜있는 코드보다, 역할 별로 잘 분리되어 있는 코드를 재사용하기가 쉬움.
- 유지 보수가 용이함 : 변경 사항이 발생했을 때 해당 관심사에 연관된 코드만 수정하면 됨.
- 테스트 코드를 작성하기 쉬워짐 : 얽혀있는 로직보다 분리되어 있는 로직에 대한 테스트가 보다 더 간단함.
- etc...
기본적인 로그인 로직
1) View와 Logic의 분리
Custom Hook을 토대로 관심사의 적용을 분리하면 훨씬 유지보수라던가 확장성이 있게 코드를 짤수있다.
2-2. Custom Hook
네임드 익스폴트와 디폴트 익스폴트의 차이로 객체 구조분해할당을한다.
Custom Hook은 이름이 use로 시작하는 자바스크립트 함수입니다.
Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 다음과 같이 분리하여 사용할 수 있습니다. 마치 여러 벽돌을 끼워 맞춰 건물을 만들듯이 React 컴포넌트를 여러 Hook을 조합하는 방식으로 개발할 수 있게 됩니다.
또한 로직을 독립적인 함수로 분리함으로서 하나의 로직을 여러 곳에서 반복적으로 재사용할 수 있게 됩니다.
회사의 경우마다 다르지만 일반적으로는 사용할폴더의 상위폴더에 따로 관리한다.
이런식으로 하나만 추가해줘도 둘다 반영이되어서 유지보수와 확장성에 유리하다!
같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하나요?
아니오. 두 Custom Hook은 서로 호출되는 위치와 타이밍이 다르며, 애초에 서로 다른 스코프(유효범위)를 생성하기 때문에 컴포넌트를 여러번 호출하는 것처럼 완전히 독립적입니다.
