React
[React] 컴포넌트 분리
gaongg
2024. 10. 9. 21:35
📑 컴포넌트 분리의 이유
1. React에서의 컴포넌트는 다양한 역할을 한다.
-UI를 표현 / 동작하는 로직 / 또는 두가지 역할을 모두 담은 컴포넌트를 담을 수 있다.
2. 재사용할 수 있는 최소 UI 단위임에도 불구하고, 웹의 복잡도와 해당 컴포넌트에서 수행하려고 하는 역할에 따라 복잡해질 수 있다.
3. 따라서 '관심사의 분리' 원칙에 따라 컴포넌트를 분리해서 관리해야 한다.
📍관심사의 분리
- 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것
- 프로그램을 구별된 '개개의 관심사를 해결하는 부분'으로 분리하는 디자인의 원칙
- 컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다.
📑 컴포넌트 분리 기준
- 단일 책임 원칙: 각 컴포넌트는 하나의 명확한 역할을 수행해야함
- 재사용 가능성: 비슷한 기능을 하는 부분은 독립적인 컴포넌트로 분리하여 재사용성을 높임
- 가독성: 코드를 작고 독립적인 컴포넌트로 나누어 가독성을 높임
- 상태와 라이프사이클: 컴포넌트가 관리하는 상태와 라이프사이클 메서드를 고려하여 분리
- UI 요소: 서로 다른 UI 요소는 별도의 컴포넌트로 분리
📑 컴포넌트 분리 장점
1. 재사용성
- 컴포넌트 단위로 분리하면 동일한 UI 요소를 여러 곳에서 쉽게 재사용할 수 있어 코드 중복을 줄일 수 있다.
2. 유지보수성
- 컴포넌트가 각각 독립적인 모듈로 구성되어 있으면 특정 기능 업데이트 또는 수정 시 해당 컴포넌트만 변경하면 되기 때문에 오류를 줄이고 수정 시간을 단축하는 데 도움이 된다.
3. 가독성
- 작은 단위로 컴포넌트를 나누면 각 컴포넌트가 특정 기능을 담당하게 되어 코드를 더 쉽게 이해할 수 있다.
📑 컴포넌트 분리 단점
1. 코드의 복잡성 증가
- 지나치게 세분화된 컴포넌트는 전체 구조를 복잡하게 만들 수 있다. 많은 파일이 있을 경우 구조가 복잡해지고 컴포넌트 간의 의존성이 높아져 코드 흐름 파악이 어렵다.
2. 성능 저하
- 컴포넌트를 지나치게 많이 나누면 렌더링 성능에 영향을 줄 수 있다.
3. 상태 관리의 어려움 증가
- 컴포넌트가 많아지면 파일과 디렉토리 구조가 복잡해져서 특정 컴포넌트를 찾고 관리하는 데 시간이 더 소요될 수 있다.
📑 컴포넌트 분리 주의점
1. 적절한 크기 유지
- 컴포넌트가 너무 작으면 구조가 복잡해지고, 너무 크면 재사용성이 떨어진다.
2. 컴포넌트 사이의 의존성 주의
- 하나의 컴포넌트가 변화할 때 다른 컴포넌트가 영향을 받아서는 안된다.