앞서 다뤘던 주제들을 다시 읽어보다 '컴포넌트'에 대해 짚고 넘어가는 것이 좋을 것 같아 내용을 정리하는 와중에 위클리 페이퍼 토픽으로 '컴포넌트와 함수형 컴포넌트, 클래스 컴포넌트의 차이점에 대해 설명'하는 것이 나와서 이 주제를 다뤄보려고 한다.
컴포넌트란?
UI를 구성하는 가장 독립적인 단위
React에서 화면은 하나의 덩어리가 아니라,
여러 개의 작은 조각들로 나뉘어 만들어진다.
이 작은 조각 하나하나를 컴포넌트(Component)라고 한다.
Flutter에서 Widget과 비슷한 역할이라고 볼 수 있다.
다만 React에서 컴포넌트는 단순한 UI 요소뿐만 아니라
상태(state), 이벤트, 로직까지 함께 관리한다는 점에서 더 넓은 개념이다.
컴포넌트 구성
앞에서 컴포넌트는 단순한 UI 조각이 아니라 상태(state), event, logic을 함께 관리하는 단위라고 했다.
그렇다면 남은 구성요소는 무엇일까?
• Props (데이터 전달)
부모 컴포넌트에서 자식 컴포넌트로 전달되는 값
앞서 컴포넌트 분리를 다루면서 알아보았던 props다.
• State (상태 관리)
컴포넌트 내부에서만 관리되는 값
이것도 State를 알아보자에서 다루어보았다.
• Event (이벤트 처리)
간단하게 말하자면 사용자의 행동(클릭, 입력)등을 처리하는 부분이다.
• Logic (비즈니스 로직)
조건문, 반복문, 데이터 처리 등 실제 동작을 담당하는 부분이다.
• UI (렌더링)
최종적으로 화면에 보여지는 부분이다.
컴포넌트는 이렇게 구성되어있는 하나의 작은 프로그램 단위 라고 볼 수 있다.
컴포넌트 작성
이제 컴포넌트를 어떻게 만드는지 알아보자
두 가지의 방식이 존재한다
- 함수형 컴포넌트 (Functional Component)
- 클래스 컴포넌트 (Class Component)• 함수형 컴포넌트 (Functional Component)
function Hello() {
return <h1>Hello World</h1>;
}또는
const Hello = () => {
return <h1>Hello World</h1>;
};이런 식으로 함수 형태로 작성되는 컴포넌트이다.
이러한 함수형 컴포넌트 특징으로는
- 코드가 간결하고 직관적
useState,useEffect와 같은 Hook을 사용할 수 있다
• 클래스 컴포넌트 (Class Component)
import React, { Component } from "react";
class Hello extends Component {
render() {
return <h1>Hello World</h1>;
}
}클래스 문법을 사용해 만드는 컴포넌트로
-this를 사용해야하며
- lifecycle 매서드를 사용하고
- 상대적으로 코드가 복잡하다.
함수형 컴포넌트 vs 클래스 컴포넌트
작성 방식을 간단하게 알아보았고, 차이점을 정리해보자
| 구분 | 함수형 컴포넌트 | 클래스 컴포넌트 |
|---|---|---|
| 문법 | 함수 | class |
| 상태 관리 | useState | this.state |
| 사이드 이펙트 | useEffect | lifecycle 메서드 |
| 코드 길이 | 짧고 간결 | 상대적으로 김 |
| 사용 추세 | ✅ 현재 표준 | ❌ 레거시 |
클래스 컴포넌트는 아직 친숙하지 않은 느낌이라 이해가 쉽지는 않다.
어떤 때에 어떤 것을 사용하는 것이 좋은지도 알아보자
어떤 것을 사용해야 할까?
쉽게 결론이 나왔다.
과거에는 state와 lifecycle을 사용하기 위해 클래스 컴포넌트를 사용해야 했지만,
Hook이 등장하면서 함수형 컴포넌트에도 동일한 기능을 모두 구현할 수 있게 되었다.
코드도 더 짧고, 가독성도 좋아졌다.
마지막으로 내용을 정리해보자면,
- 컴포넌트는 UI를 구성하는 독립적인 단위이면서 props, state, event, logic, UI로 구성된다
- 함수형 / 클래스 두 가지의 방식이 존재하며 현재는 함수형 컴포넌트 방식이 많이 사용된다컴포넌트 분리도 공부해보며 React를 다루면서 컴포넌트라는 단어는 많이 들었지만 제대로 이해하고나니 다른 개념들도 확실하게 잡히는 것 같아 좋았다.
