[프리온보딩] 리액트 관심사 분리

관심사 분리(Seperation of Concerns, SoC)

관심사 분리란 각 모듈들이 한 번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것을 의미한다.

모든 디자인 패턴, 기법, 아키텍처의 기본이 되는 개념이다.

 

관심사 분리의 이유

• 변화에 유연하게 대응할 수 있게 만들기 위함이다.
• 하나의 모듈이 하나의 목적만 가지면, 코드 변경의 이유도 명확해진다.
• 유지보수와 확장성이 향상된다.

 

React의 관심사 분리

React는 UI 구축을 위한 라이브러리로, UI와 로직이 주요 관심사다. 개발자는 UI와 로직이란 것을 파악하고 이를 분리하기 위해서 여러 기법들을 연구한다.

관심사 분리를 위한 방법으로는 Presentational-Container 패턴과 Custom Hook이 있다.

 

Presentational - Container

Presentational - Container 기법은 컴포넌트를 두 계층으로 나누어서 Presentational을 Container로 감싼 후, 필요한 정보들과 로직을 모두 props로 전달해 주는 형태로 설계하는 방법이다. 하지만 Hook이 등장한 후에는 Presentational - Container 패턴을 많이 사용하지 않는다.

 

Custom Hook

커스텀 훅은 리액트가 기본적으로 제공해주는 훅들을(useState, useEffect 등) 이용해서 만든 함수다. 로직은 UI를 변경시키기 위함이고, 함수형 컴포넌트에서 로직은 대부분 useState, useEffect 등의 Hook을 통해서 구현된다.

 

이를 통해 로직을 재사용하고, 컴포넌트를 더 간결하고 관리하기 쉽게 만든다. 

Custom Hook은 use로 시작하는 이름을 가지며, React의 Hook들을 호출한다.

 

Reusing Logic with Custom Hooks – React