1. 리엑트 컴포넌트

• 리액트 컴포넌트는 리액트(React)에서 UI를 구성하는 기본 단위임.
• 컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, 각 컴포넌트는 자신만의 상태(state)와 속성(props)을 가질 수 있음.
• 컴포넌트를 사용하면 UI를 작은 단위로 쪼개어 복잡한 애플리케이션을 더 쉽게 관리하고 개발할 수 있음.
• 리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지가 주로 사용되며, 최근에는 함수형 컴포넌트가 더 선호되고 있음.

2. 리엑트 컴포넌트 분리 이유

ㄱ. 코드의 재사용성

• 동일한 UI 요소나 기능이 여러 곳에서 사용될 때, 이를 컴포넌트로 분리하면 중복 코드를 줄일 수 있음.

ㄴ. 유지보수성

• 코드가 작은 단위로 나뉘어 있으면 특정 기능을 수정할 때 전체 코드를 수정할 필요 없이 해당 컴포넌트만 수정하면 됨.

ㄷ. 가독성

• 작은 단위로 나뉜 컴포넌트는 더 읽기 쉽고 이해하기 쉬움. 마지막으로, 성능 최적화를 위해 컴포넌트를 분리하기도 함. 필요한 부분만 렌더링할 수 있어 성능이 향상됨.

3. 리엑트 컴포넌트 분리 규칙

ㄱ. 하나의 컴포넌트는 하나의 책임만 가지도록

• 컴포넌트는 하나의 명확한 역할만 수행하도록 작성해야 함. 여러 역할을 동시에 처리하려 하면 코드가 복잡해지고 유지보수가 어려워짐.

ㄴ. 재사용 가능한 부분을 컴포넌트로 분리

반복적으로 사용되는 UI 요소나 로직은 별도의 컴포넌트로 분리하는 것이 좋음. 예를 들어, 버튼, 입력 폼, 모달 창 등이 있음.

ㄷ. 관심사의 분리

• UI와 비즈니스 로직을 분리하는 것도 중요한 규칙임. UI 컴포넌트는 시각적 요소에 집중하고, 로직 컴포넌트는 데이터 처리와 상태 관리를 담당하도록 설계함.

ㄹ.상태(state) 관리

• 상태를 많이 사용하는 컴포넌트는 관리하기 어려워질 수 있음. 상태를 사용하는 컴포넌트와 그렇지 않은 컴포넌트를 분리하여 상태 관리를 단순화하는 것이 좋음.

4. 리엑트 컴포넌트 분리 장점

ㄱ. 유지보수 용이성

• 각 컴포넌트가 독립적으로 동작하므로, 특정 컴포넌트에 문제가 생겼을 때 그 부분만 수정하면 됨.

ㄴ.재사용성

• 여러 곳에서 동일한 컴포넌트를 재사용할 수 있어 코드 중복을 줄이고 개발 생산성을 높임.

ㄷ. 가독성

• 컴포넌트가 잘 분리되어 있으면 코드 구조가 명확해지고 읽기 쉬워짐.
  성능 최적화: 리액트의 Virtual DOM과 함께 잘 분리된 컴포넌트 구조는 필요한 부분만 효율적으로 업데이트할 수 있음.

ㄹ. 협업 용이성

• 컴포넌트가 독립적이면 팀원들이 각각 다른 컴포넌트를 담당하여 작업할 수 있어 협업이 수월해짐.

5. 리엑트 컴포넌트 분리 단점

ㄱ. 초기 복잡도 증가

• 처음부터 너무 세세하게 컴포넌트를 분리하려 하면 오히려 구조가 복잡해질 수 있음. 작은 프로젝트에서는 오버엔지니어링이 될 위험이 있음.

ㄴ. 부모-자식 컴포넌트 간 데이터 전달 복잡성

• 컴포넌트를 너무 많이 분리하면 props로 데이터를 전달하는 구조가 복잡해질 수 있음.

ㄷ. 성능 저하 가능성

• 잘못된 방식으로 컴포넌트를 분리하면 오히려 리렌더링이 많아져 성능이 저하될 수 있음. 성능 최적화를 고려하지 않고 무분별하게 분리하면 문제가 될 수 있음.
  • 과도한 컴포넌트 분리 : 너무 세세하게 컴포넌트를 분리하면 각 컴포넌트 간의 의존성이 증가하고, 데이터 전달이 복잡해짐.
  • 상태 관리가 분산됨 : 상태(state)를 너무 많은 컴포넌트에 분산시키면 상태 관리가 복잡해지고, 디버깅이 어려워짐. 상태가 여러 곳에 퍼져 있으면, 상태 변화가 어디서 발생하는지 추적하기 힘들어짐.
  • 불필요한 리렌더링 초래 : 컴포넌트를 잘못 분리하면, 불필요한 리렌더링이 발생할 수 있음.