React에서 컴포넌트란?
React를 배우기 시작하면 가장 먼저 만나게 되는 개념이 바로 컴포넌트(Component)입니다.
React에서 컴포넌트는 단순한 기능 단위 그 이상으로, 화면을 구성하는 기본 블록이자,
UI를 설계하는 가장 핵심적인 단위입니다.
컴포넌트(Component)는 UI(User Interface)를 구성하는 가장 작은 단위입니다.
재사용 가능한 JSX 블록이라고 볼 수 있으며, 하나의 화면을 여러 컴포넌트로 나누어 효율적으로 개발할 수 있게 도와줍니다.
쉽게 말해, 사용자에게 보여지는 화면을 구성하는 ‘부품’이라고 생각하면 됩니다.
컴포넌트를 사용하는 이유는 다음과 같습니다.
- 복잡한 화면을 작은 단위로 나누어 설계하면 구조가 명확해지고,
- 각 단위를 독립적으로 개발, 테스트, 재사용할 수 있으며,
- 변경이 필요한 부분만 빠르게 수정할 수 있기 때문입니다.
React는 이런 UI를 컴포넌트 단위로 쪼개어 관리하는 데 최적화된 라이브러리입니다.
컴포넌트의 역할: UI를 구성하는 독립적인 블록
HTML을 그대로 작성하는 전통적인 방식에서는 전체 화면이 하나의 긴 코드 덩어리로 구성됩니다.
하지만 리액트에서는 화면을 작은 단위의 컴포넌트로 나눕니다.
예를 들어, 블로그 메인 화면을 설계한다고 할 때, 다음과 같은 구조로 나눌 수 있습니다.
<Header />
<Article />
<Footer /><Header />: 사이트 상단 메뉴, 로고, 네비게이션 등을 담당하는 컴포넌트<Article />: 본문 내용 (텍스트, 이미지 등)을 표시하는 컴포넌트<Footer />: 하단 정보(연락처, 저작권 등)를 나타내는 컴포넌트
각각의 컴포넌트는 하나의 역할만 담당하도록 나누어 작성하고, 이들을 조립하면 하나의 완성된 페이지가 만들어집니다.
각 컴포넌트는 자체적으로 고유한 역할과 책임을 가집니다
즉, 각각의 컴포넌트는 하나의 독립된 단위로 존재하며 부품처럼 조립하여 하나의 완성된 페이지를 구성하는 것입니다.
컴포넌트를 사용하는 이유
React에서 컴포넌트를 사용하는 이유는 단순히 코드를 나누기 위해서가 아닙니다.
컴포넌트 기반 구조는 유지보수, 재사용, 확장성 등 소프트웨어 개발에 필요한 여러 장점을 제공합니다.
| 이유 | 설명 |
|---|---|
| 재사용성 | 같은 UI를 여러 곳에서 반복 사용 가능 |
| 유지보수성 | 각 컴포넌트를 독립적으로 수정/관리할 수 있음 |
| 가독성 | UI가 잘게 나뉘어 구조를 파악하기 쉬움 |
| 확장성 | 기능 추가 시 새 컴포넌트만 추가하면 됨 |
| 테스트 용이성 | 각 컴포넌트를 개별적으로 테스트 가능 |
즉, 컴포넌트를 잘 설계해두면, UI가 복잡해지더라도 문제의 범위를 좁게 한정하고, 의존성 없이 하나의 기능만 집중적으로 관리할 수 있습니다.
컴포넌트는 어떻게 생겼을까?
React 컴포넌트는 기본적으로 JSX(JavaScript + XML) 형태로 작성됩니다.
JSX는 JavaScript 안에 HTML을 작성할 수 있게 해주는 문법입니다.
함수형 컴포넌트 예시
function Header() {
return <header><h1>My Site</h1></header>;
}
function Article() {
return <main><p>Welcome to my blog!</p></main>;
}
function Footer() {
return <footer><small>© 2025 My Company</small></footer>
}전체 조립 예시
function App() {
return (
<div>
<Header />
<Article />
<Footer />
</div>
);
}- 이처럼 각 기능별 컴포넌트를 하나씩 만들고, App이라는 컴포넌트에서 조립하면 하나의 페이지가 완성됩니다.
실제 화면 구성 예시
React 프로젝트에서는 각 컴포넌트를 보통 파일 단위로 분리하여 관리합니다.
이렇게 하면 각 파일의 역할이 분명해지고, 협업과 유지보수에 매우 유리해집니다.
전체 구조 예시
<div>
<Header />
<Article />
<Footer />
</div>각 컴포넌트 별 파일 구성 예시
/src
├── App.js ← 전체 조립
├── components/
│ ├── Header.js ← 상단 메뉴 컴포넌트
│ ├── Article.js ← 본문 컴포넌트
│ └── Footer.js ← 하단 컴포넌트- 이 구조를 사용하면 UI 변경이 필요한 경우 해당 컴포넌트만 수정하면 되고, 새 기능이 추가되면 새로운 파일로 분리해서 추가할 수 있습니다.
정리
| 항목 | 설명 |
|---|---|
| 컴포넌트란 | UI를 구성하는 가장 작은 단위 |
| 필요성 | 재사용성, 유지보수성, 확장성, 가독성 때문 |
| 리액트에서 컴포넌트 역할 | 각각의 컴포넌트가 하나의 기능이나 화면의 특정 부분을 담당 |
| 실제 구성 방식 | 여러 컴포넌트를 조립해서 전체 화면 구성 |
