안녕하세요! 이번 시간에는 컴포넌트란 무엇이며 또 컴포넌트를 어떤 기준으로 분리 하는지 그리고 컴포넌트를 만드는 방법 대해 알아보도록 하겠습니다.

컴포넌트란?

컴포넌트란 “컴포넌트(component)"는 UI(User Interface)를 구성하는 독립적이고 재사용 가능한 조각입니다. 즉, UI의 각 파트를 독립적으로 분리하여 개발하고, 이를 조합하여 완전한 UI를 만들 수 있습니다.

쉽게 말해서 리액트는 컴포넌트들로 이루어진 애플리케이션 입니다.

컴포넌트로 분리하는 기준?

재사용성

버튼, 입력 필드, 카드, 팝업 등 여러 곳에서 반복적으로 사용되는 공통 UI를 재사용 할 수 있도록 컴포넌트를 분리합니다.

단일 책임 원칙(SRP)

각 컴포넌트가 하나의 책임만 가지도록 합니다. 예를 들어, UserProfile 컴포넌트는 사용자 정보를 보여주는 역할만 하도록 합니다. 즉, 각 컴포넌트의 역할이 명확하게 정의 되도록 하며, 하나의 컴포넌트가 너무 많은 역할을 담당하지 않도록 합니다. 그러면 코드의 이해도와 유지보수성을 향상 시킬 수 있습니다.

가독성

한 화면에 너무 많은 코드가 있다면 매우 복잡하고 읽기 힘든 코드가 될 수 있습니다. 그래서 코드를 작고 독립적인 컴포넌트로 나누어 코드의 가독성을 높여 각 컴포넌트가 적절한 크기와 복잡도를 갖도록 유지합니다.

<aside> 🏎️ 컴포넌트를 나누는 기준은 팀, 회사, 개발자 마다 상이 함으로 내부 룰에 맞게 적용하시면 되며, 경력이 쌓이다 보면 자연스럽게 보입니다. 그리고 위 모든 기준은 불편함을 개선한 것이라는 점을 생각하면 컴포넌트를 분리하는 데 도움이 될 것입니다.

</aside>

컴포넌트를 만드는 방법

리액트 컴포넌트를 만드는 방법은 함수형 컴포넌트와 클래스형 컴포넌트 크게 두 가지가 있습니다. 하지만 현재 리액트 공식 문서에서는 함수형 컴포넌트와 Hook을 사용하는 것을 권장하고 있습니다.

리액트에서 함수형 컴포넌트를 권장하는 이유는 클래스형 컴포넌트 대비 코드를 작성하기 쉽고 성능면에서 유리하기 때문입니다.

이번 강의에서는 함수형 컴포넌트로 작성하는 방법으로 설명드릴 예정이며, 다른 리액트 강의 그리고 현업에서도 함수형 컴포넌트를 권장하기 때문에 참고하시면 좋을 것 같습니다.

함수형 컴포넌트

const MyComponent = () => {
  return <div>Hello, World!</div>;
};