React - component
컴포넌트란?
리액트에서 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각이라고 설명할 수 있다.
컴포넌트는 특정 기능이나 UI 요소를 캡슐화하며 잘 만들어진 컴포넌트는 주로 단일 책임 원칙을 따른다.
크게 클래스형과 함수형으로 나눌 수 있는데 최근에는 Hooks의 도입으로 함수형 컴포넌트가 주로 사용되고 있다.
함수형 컴포넌트는 더 간결하고 이해하기 쉽게 코드를 작성할 수 있다.
주요 장점
-
재사용성:
UI의 일부분을 구성하는 독립적인 컴포넌트를 만들어 여러 페이지에서 다양한 스타일과 기능으로 재사용할 수 있다. -
유지보수성(관심사 분리):
특정 기능의 로직과 UI를 함께 정의해 독립적으로 컴포넌트를 개발할 수 있다. 이러한 편리함은 복잡한 인터페이스의 구조와 진행을 쪼개어 단순화한다. 그리고 변경사항이 생기면 해당 컴포넌트만 찾아 바꾸면 되기 때문에 유지보수에 용이하다.
컴포넌트 설계 시 고려사항
-
너무 많은 책임감을 갖지 않도록 설계
컴포넌트의 역할이 명확하도록 설계해야 한다. 물론 이를 고려하지 않아도 정상 작동은 하지만, 추후의 유지보수성을 고려해야 한다면 하나의 컴포넌트가 너무 많은 책임을 가지지 않도록 하는 것이 중요하다. 대표적으로 비지니스 로직과 UI 로직을 철저히 분리하는 것을 예로 들 수 있다. -
재사용성 고려
특정 컴포넌트가 여러 상황에서 재사용될 가능성이 높다면 유연하게 설계해야 추후 재사용이 용이하다. props를 통해 필요한 데이터와 동작을 주입받아 다양한 상황에서 쉽게 재사용될 수 있도록 하는 것이 좋다. -
성능 최적화
불필요한 리렌더링을 방지하기 위해 메모이제이션을 적절히 활용하고 컴포넌트의 크기를 적절히 유지하는 것이 좋다.
서버 컴포넌트
서버 컴포넌트는 리액트 18 버전에서 도입된 기능이다. 기본적으로 클라이언트에서 실행되는 기존의 리액트 컴포넌트와 다르게 서버에서만 렌더링되는 컴포넌트를 말한다.
서버에서만 실행되기 때문에 브라우저 쪽 번들 크기를 줄이고 초기 로딩 속도를 개선하는데 장점이 있다.
예를 들어, 서버 컴포넌트는 데이터베이스나 API에서 데이터를 가져오는 작업을 서버에서 처리하고, 그 결과를 클라이언트로 보낼 수 있어서 클라이언트와 서버간의 데이터 통신을 줄일 수 있다.
또한 서버 컴포넌트는 보안 측면에서도 강점이 있다. 데이터베이스 연결 정보나 API 키 같은 민감한 정보를 클라이언트로 보내지 않아도 되는 구조라 안전하게 데이터를 다룰 수 있다.
서버 컴포넌트의 단점
-
서버 의존성 증가:
서버 컴포넌트는 이름 그대로 서버에서 실행되기 때문에 서버가 반드시 필요하다. 따라서 서버가 다운되거나 응답 시간이 느려지면 클라이언트에서도 영항을 받게 된다. -
사용자 경험과 인터랙션 문제:
서버 컴포넌트는 클라이언트 컴포넌트와 결합해서 사용해야 하는데, 이 과정에서 복잡한 사용자 인터랙션(실시간 업데이트, 드래그 앤 드롭 등)을 처리하기가 어렵다. 서버 컴포넌트는 주로 정적인 데이터나 렌더링에 적합하기 때문에 클라이언트 쪽의 인터렉션이 필요한 경우 한계가 있을 수 있다.
