컴포넌트(Component)란?
Component를 한국어로 번역하면 '구성요소', '성분'이라는 뜻을 가진 단어입니다.
프로그래밍에서의 Component는 일반적으로 재사용이 가능한 코드 블록를 의미합니다. 독립적인 기능을 수행할 수 있으며, 이를 통해 다른 Component와 상호작용 할 수 있습니다. 이런 특성들 덕분에 Component를 활용하면 재사용성, 독립성, 유지 관리를 향상시킬 수 있습니다.
React에서의 컴포넌트
React는 컴포넌트라고 불리는 분리된 UI 조각으로 구성됩니다. React 컴포넌트는 마크업을 뿌릴 수 있는 JavaScript 함수입니다. 컴포넌트는 버튼만큼 작을 수도 있고 전체 페이지만큼 클 수도 있습니다. React 공식 문서 번역
조금 더 설명을 하자면 Component는 독립적인 기능을 수행하는 React의 작은 단위로 여러 개의 Component들이 모여 한 페이지의 UI 즉, 사용자가 보는 view를 구성합니다.
React Component의 특징
재사용성
컴포넌트를 재사용함으로써 코드 중복을 줄일 수 있습니다. 예를 들어, 동일한 버튼이 여러 페이지에 걸쳐 사용될 경우 해당 버튼을 컴포넌트로 만들어 재사용할 수 있습니다.
단일 책임 원칙(Single Responsibility Principle, SRP)
만들어진 컴포넌트는 자신의 기능에만 집중하며, 하나의 컴포넌트는 하나의 기능만을 수행하는 것이 이상적입니다. 이 원칙을 따르면 컴포넌트는 간결해지고 유지 관리하기 편해집니다.
단방향 데이터 흐름(one-way data flow)
React Component는 props와 state라는 두 가지 방법으로 데이터를 다룹니다. props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 데 사용되며, state는 컴포넌트 내부에서 데이터를 관리하는 데 사용됩니다.
React Component의 종류
함수형 컴포넌트(Functional Components)
함수로 정의되는 컴포넌트로서 state를 가지지 않고, React의 생명주기 메서드를 사용할 수 없는 컴포넌트입니다. 그러나 React 16.8 버전부터 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 되었습니다.
클래스 컴포넌트(Class Components)
클래스 컴포넌트는 ES6의 클래스를 이용해 정의되는 컴포넌트로 state와 생명주기 메서드를 사용할 수 있습니다.
React Component 규칙
React의 컴포넌트로 인식되기 위해서는 2가지의 규칙이 필요합니다.
- 함수의 제목은 항상 영문 대문자로 시작
- 함수에서 렌더링 가능한 값이 반환 되어야 함
마무리
React 컴포넌트를 사용하면 개발자는 UI를 재사용 가능한 개별 부품으로 분해할 수 있어, 코드의 유지 관리가 용이하고 테스트가 쉬워집니다. 따라서 복잡한 웹 애플리케이션을 더 효과적으로 관리하고 개발하는 데 도움을 줍니다. 이는 앞선 글에서 얘기했던 React의 탄생 배경에 직접적인 이유가 됩니다.
컴포넌트가 React의 주요 내용이다보니 많은 개념들이 연관되어 있어 이번 글에서는 대략적인 내용만 작성하였고 개념들을 하나씩 공부하고 소개하며 부족한 부분을 채울 생각입니다.
글 작성에 도움받은 목록
