📦리액트에서 컴포넌트를 분리하는 방법

리액트에서 컴포넌트를 분리하는 방법

박채연

2024.04.26

🪄 컴포넌트란?

컴포넌트는 리액트에서 UI를 구성하는 기본적인 빌딩 블록입니다.

작은 단위로 분할될 수 있고, 이 컴포넌트를 조합하면서 다양한 UI를 만들어 나가는 것이죠!

크게 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘는데,

클래스형 컴포넌트의 경우, render() 메서드를 사용해 JSX를 반환하는 형태로 작동합니다.

state를 가질 수 있으며, 라이프 사이클 메서드를 사용할 수 있습니다!

함수형 컴포넌트의 경우, 입력값을 props로 받은 후, JSX를 반환하는 형태로 작동합니다. state를 갖지 않으며, 라이프 사이클 메서드를 사용할 수 없는 대신, hook을 사용합니다.

🪄 컴포넌트를 분리하는 기준

[1] 단일 책임 원칙 (복잡성)

하나의 컴포넌트는 한가지 일을 하는 것이 이상적이라는 원칙인데요.

모든 클래스는 하나의 책임만 가지며, 클래스는 그 책임을 완전히 캡슐화 해야 한다는 의미입니다. 컴포넌트의 크기가 커지면 가독성이 떨어지고 유지보수가 어려워지며, 의존성이 생기게 됩니다. 또한, side effect가 발생할 가능성도 높아지죠!

따라서, 이 단일 책임 원칙을 잘 지켜서 컴포넌트를 분리하면 코드의 응집성을 높이고 가독성을 향상시킬 수 있습니다.

[2] 재사용성

코드가 재사용될 가능성이 있다면 새 컴포넌트를 만들어서 분리합니다.

프로젝트가 커질수록 UI 일부가 여러 번 사용되는 경우가 많을텐데, 그때마다 새롭게 코드를 작성하거나, 기존에 작성한 코드를 붙여넣기 하는 과정은 불편하겠죠?

그래서 반복되는 코드를 새 컴포넌트로 만들어서 재사용할 수 있게 분리를 하는 방식으로 나눠줍니다. 유사한 기능을 가진 컴포넌트를 추상화해서 공통으로 사용할 수 있는 컴포넌트를 만들어 주는 겁니다!

[3] 성능 최적화

불필요한 렌더링을 방지하기 위해서도 컴포넌트를 분리하면 좋은데요. 중복되는 계산을 피하고, 최적화된 방식으로 이벤트 핸들러, 상태관리 라이브러리를 사용할 수 있도록 컴포넌트를 나눠주는 방식입니다. 리렌더링을 최소화 시키는 것이 목적이죠!

🪄 컴포넌트를 분리하는 이유

컴포넌트 분리 기준에서도 계속 언급된 것처럼, 컴포넌트를 분리해야 하는 이유는 코드의 가독성과 유지보수성 때문입니다. 반복되는 코드를 분리해서 작성해두고, 그 부분이 필요할 때마다 컴포넌트를 불러와 사용하면, 코드의 가독성이 너무 좋겠죠? 또, 수정해야 할 부분이 생기면 그 기능과 관련된 컴포넌트만 수정하면 되니까, 유지보수를 하기에도 좋을 겁니다!

또한, 컴포넌트를 분리함으로써 개발에 드는 리소스를 줄일 수 있는데요. UI는 일정한 패턴을 두고, 반복되는 요소들이 존재합니다. 따라서 해당 요소들을 매번 새롭게 개발하는 것보다 미리 만들어진 요소를 재사용함으로써 리소스를 줄일 수 있습니다.

🪄 응집도와 결합도

응집도란, 모듈에 포함된 내부 요소들이 하나의 책임/목적을 위해 연결된 정도를 말합니다. 모듈 내부의 기능적인 응집 정도를 나타내고, 이 응집도는 높을수록 좋다고 합니다. 변경 대상과 범위가 명확해지는 장점이 있기 때문이죠.

ex. a 라는 기능을 수정하기 위해, a 기능이 모여있는 A 모듈만 찾아서 수정하면 편하겠죠? 만약, a 기능이 흩어져 있거나, A 모듈에 b, c, d 기능이 있다면 수정이 어려울 겁니다!

결합도란, 모듈이 다른 모듈에 의존하는 정도에 대한 척도라고 합니다. 즉, 모듈 간의 상호 결합 정도를 나타내는 것입니다. 결합도가 높으면, 변경하고 검토해야 하는 모듈이 많아지기 때문에, 낮을수록 검토해야 하는 모듈의 수가 적어져 코드 수정이 수월해진다고 합니다.

ex. 유지보수를 위해 b 라는 기능을 수정하려고 합니다. b 기능이 모여있는 B 모듈을 수정하는데, 다른 모듈들 A, C, D, E 와 기능이 연결되어 있으면, 다른 모듈을 확인하면서 수정을 진행해야 하기 때문에 수정에 어려움이 있겠죠?

따라서, 응집도는 높을수록, 결합도는 낮을수록 좋다고 합니다!