[ReactJS] 관심사의 분리와 Custom Hook

관심사의 분리

• 각각의 관심사에 따라 코드를 분리하는 기법
• 코드가 하나의 관심사만 신경쓰도록 분리하는 것

 

관심사의 분리의 특징

• 특정한 변화에 대응하기 위해 읽고 이해하고 수정해야 하는 코드의 단위를 줄일 수 있어 유지 보수에 용이해진다.
• 하나의 코드가 하나의 기능을 담담하기에 여러 역할이 혼재된 코드보다 단위별로 재사용하기 쉬워진다.
• 코드의 기능 테스트 또한 쉬워진다.
• 관심사의 분리가 잘 된 소프트웨어는 낮은 결합도와 높은 응집도란 특징이 나타난다.
  • 낮은 결합도 (Loose Coupling) : 코드가 얽혀있지 않고 관심사에 따라 독립적으로 잘 분리되어 있다.
  • 높은 응집도 (High Cohesive) : 동일한 목적(관심사)를 가진 코드끼리 잘 모여있다.

 

KISS 원칙

• Keep It Simple, Stupid
• 관심사의 분리를 하나의 소프트웨어 개발 원칙으로 표현한 것
• 관심사의 분리를 통해 하나의 코드가 하나의 기능만을 담당하도록 구성하여 코드를 간결하고 목적이 명확히 드러나도록 하는 것이 KISS 원칙이다.

Custom Hook

• Custom Hook은 컴포넌트에 어지럽게 섞여 있는 State와 Effect를 관심사의 분리를 통해 각각 분리하는 개념이다.

 

• Custom Hook은 이름이 use로 시작하며 다른 Hooks를 호출하는 자바스크립트 함수이다.
• Custom Hook을 사용하면 컴포넌트에 결합되어 있던 state와 effect를 함수 단위로 추출할 수 있다.

 

• Hooks 등장 이전에는 로직을 담당하는 컴포넌트(Container)와 UI를 담당하는 컴포넌트(Presentational)를 분리해서 관리하였다. (Presentational - Container 패턴)
• Hook 등장 이후로는 이제 함수 컴포넌트에서도 로직을 작성할 수 있게 되었고, Container - Presentational 패턴은 더 이상 권장되지 않게 되었다.

 

• 하지만, 여전히 함수 컴포넌트 내부에 로직과 UI가 뒤섞여서 존재했다.
  • 컴포넌트 내부의 코드가 길어져서 가독성이 떨어짐
  • 작성한 로직을 다른 컴포넌트에서도 동일하게 사용해야 하는 경우
• 이를 해결하기 위해 재사용 가능한 함수 단위로 로직을 분리하는 Custom Hook이 등장하였다.
• 현재는 함수 컴포넌트와 Custom Hook을 이용해서 관심사를 분리하고 있다.

 

Custom Hook의 특징

• 로직의 복잡한 내부 구조를 숨긴 채 단순한 함수 호출 형태로 Custom Hook을 사용할 수 있다.
• Custom Hook 함수를 여러 컴포넌트에서 호출하는 방식으로 로직을 재사용할 수 있다.