컴포넌트 (component)
컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 작은 단위를 의미한다.
리액트는 컴포넌트를 조합해 하나의 애플리케이션을 완성한다.
위 그림처럼 웹페이지를 기능 단위로 나누는 과정을 추상화라고 한다.
추상화는 복잡한 구조를 단순하게 표현함으로써 전체 시스템을 명확하게 이해하고 관리하게 도움을 준다.
추상화 하여 기능별로 나누어 각각의 컴포넌트로 구현한 후 App컴포넌트에 모두 조합하는 식이다.
// 각각의 컴포넌트 구현 후
function App() {
return (
<div>
<Header />
<Aside />
<Article />
<Footer />
</div>
)
}컴포넌트의 장점
- header, footer 컴포넌트의 경우 대부분의 페이지에서 공통적으로 쓰이므로 컴포넌트로 분리하면 중복코드 없이 재사용이 가능하다.
- 컴포넌트 별로 독립적으로 관리할 수 있어 유지보수에 용이하다.
또한, 독립적이므로 오류가 발생했을 때 어느 컴포넌트에서 문제가 생겼는지 빠르게 파악가능하고, 수정시 다른 컴포넌트에 영향을 주지 않는다. - UI로직과 UX로직을 분리하는 것이 가능하다.
- 상태가 변경된 부분만 선택적으로 랜더링할 수 있어서 성능을 최적화할 수 있다.
상태 변화가 잦은 UI영역을 별도로 분리하면 불필요한 렌더링을 줄일 수 있다.
컴포넌트의 종류
클래스 컴포넌트와 함수형 컴포넌트가 있는데
2025년 대부분은 함수형 컴포넌트만 사용하므로 클래스 컴포넌트는 다루지 않겠다.
함수형 컴포넌트는 함수를 이용해 컴포넌트를 작성하는 방식으로 함수 그 자체라고 이해해야 한다.
컴포넌트의 이름은 파스칼 케이스로 작성해야한다.
function mycomponent() {} // X
function MyComponent() {} // O기본 구조는 function 키워드로 함수를 선언하고 (선언문 방식),
return문 안에는 JSX를 사용하여 화면에 표시될 UI 구조를 정의한다.
export default 키워드를 사용하면 이 컴포넌트를 다른 파일에서 쉽게 불러와 사용할 수 있다.
function App() {
return (
<>
<h1>빈 <>처럼 보이는 Fragment 는</h1>
<p>여러 태그를 하나로 감싸주는 용도</p>
</>
);
}
export default App;컴포넌트 트리
컴포넌트가 어디에서 렌더링 되는지에 따라 컴포넌트 트리에서의 위치가 결정된다.
즉, 컴포넌트 간 포함관계에 따라 트리가 구성되며 이 구조가 동작 방식이나 데이터 흐름에 중요한 영향을 준다.
- 계층구조 : 컴포넌트는 부모-자식 관계의 계층구조를 가지며 부모는 여러 자식 컴포넌트를 가질 수 있고, 자식 컴포넌트는 특정 부모 안에서만 렌더링된다. HTML과 달리 형제 관계는 없다.
- 단방향 데이터 흐름 : 부모에서 자식으로 흐른다. 부모 컴포넌트가 props를 통해 자식에게 데이터를 전달할 수 있다.
- 상태관리 : 각 컴포넌트는 자신만의 상태(State)를 가질 수 있다. 상태가 변화하면 리렌더링 되므로 UI에 새로운 상태를 반영한다.
- 렌더링 최적화 : 가상 DOM을 사용해 실제 DOM과 차이를 비교한 뒤 변경된 부분만 업데이트하여 빠르고 효율적인 렌더링이 가능하다.
참고자료
이벤트 속성 - 리액트 공식문서
리액트 프론트엔드 개발 입문 / 저자 김기수
다음 포스팅으로 추천합니다.
컴포넌트와 props 객체 - React Props
컴포넌트와 이벤트 - React Event
컴포넌트의 상태 - React Hook - useState, useEffect, useRef
