React – JSX와 렌더링 – 컴포넌트 렌더링 – 0 – 함수형 vs 클래스형 컴포넌트
안녕하세요, 여러분! 😊
이번 글에서는 React의 중심 개념인 컴포넌트(Component) 중에서도
함수형 컴포넌트와 클래스형 컴포넌트의 차이점에 대해 아주 자세히 알아볼 거예요.
React에서 컴포넌트는 마치 레고 블록처럼 앱을 구성하는 기본 단위인데요,
이 블록을 만드는 방식에는 두 가지가 있어요: 함수형(functional), 클래스형(class-based).
예전에는 클래스형이 주력이었지만, 최근에는 거의 모든 프로젝트에서 함수형 컴포넌트를 표준처럼 사용하고 있어요.
하지만 그 차이를 알고 있어야 예전 코드를 이해하거나 유지보수할 수 있겠죠?
1. 컴포넌트란 무엇인가요?
컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 조각이에요.
예를 들어, 버튼, 카드, 리스트 등 화면의 요소들을 하나씩 컴포넌트로 나눠서 설계하면 코드가 훨씬 관리하기 쉬워져요!
2. 함수형 컴포넌트란?
함수형 컴포넌트는 JavaScript 함수처럼 생긴 컴포넌트입니다.
매우 간단하고 코드가 짧아, 현재 가장 많이 사용되는 방식이에요.
✅ 예시
function Welcome(props) {
return <h1>안녕하세요, {props.name}님!</h1>;
}또는 화살표 함수로도 쓸 수 있어요:
const Welcome = ({ name }) => <h1>안녕하세요, {name}님!</h1>;🎯 특징
- 선언이 간단하다
this키워드가 필요 없다- React Hooks를 통해 상태, 생명주기 등을 모두 다룰 수 있다
- 권장되는 최신 방식
3. 클래스형 컴포넌트란?
클래스형 컴포넌트는 ES6 클래스 문법을 기반으로 만들어지는 컴포넌트예요.
✅ 예시
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return <h1>안녕하세요, {this.props.name}님!</h1>;
}
}🎯 특징
render()메서드를 통해 UI 반환this를 꼭 사용해야 함 (this.props,this.state)- 상태(state)와 생명주기 메서드(
componentDidMount등)를 직접 다룰 수 있음 - Hook 도입 전까지는 주요 방식이었음
4. 상태(state)와의 관계
함수형 컴포넌트에서 상태 사용 (Hook)
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>클릭 수: {count}</button>;
}클래스형 컴포넌트에서 상태 사용
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
클릭 수: {this.state.count}
</button>
);
}
}🧠 보이시나요? 함수형 컴포넌트는 코드가 훨씬 간결하죠?
5. 생명주기(Lifecycle) 관리
클래스형의 생명주기 메서드
componentDidMount() {
console.log("컴포넌트가 마운트됨");
}
componentDidUpdate(prevProps, prevState) {
console.log("컴포넌트가 업데이트됨");
}
componentWillUnmount() {
console.log("컴포넌트가 언마운트됨");
}함수형의 useEffect Hook
import { useEffect } from 'react';
useEffect(() => {
console.log("마운트 or 업데이트");
return () => {
console.log("언마운트");
};
}, []);💡
useEffect하나로 클래스의componentDidMount,componentDidUpdate,componentWillUnmount를 모두 대체할 수 있어요!
6. 비교 요약 테이블
| 항목 | 함수형 컴포넌트 | 클래스형 컴포넌트 |
|---|---|---|
| 선언 방식 | 함수 | ES6 클래스 |
| 상태(state) 사용 | useState Hook |
this.state, setState() |
| 생명주기 처리 | useEffect Hook |
생명주기 메서드 직접 작성 |
this 사용 |
❌ 없음 | ✅ 필수 |
| 코드 양 | 적고 간결함 | 비교적 길고 복잡함 |
| 최신 React 지원 | ✅ 적극 지원 | ⚠️ 유지보수는 되나 신기능은 제한적 |
| 학습 난이도 | 낮음 | 중간 이상 |
| 사용 추천 | ✅ 현재 표준 | ❌ 새로 작성 시 비추천 |
7. 언제 어떤 방식을 써야 하나요?
| 상황 | 추천 방식 |
|---|---|
| 새 프로젝트 시작 | 함수형 컴포넌트 |
| 간단한 UI 요소 | 함수형 컴포넌트 |
| 예전 코드 유지보수 | 클래스형 컴포넌트 이해 필요 |
| 학습 및 면접 대비 | 둘 다 알아두기 |
지금 React 생태계는 함수형 컴포넌트 중심으로 재편되고 있습니다.
앞으로는 클래스형 컴포넌트는 점점 줄어들고, 함수형 + Hook 방식이 대세가 될 거예요!
주의할 점 정리
| 주의사항 | 설명 |
|---|---|
함수형 컴포넌트엔 this가 없다 |
this.props가 아니라 props 직접 사용 |
| Hook은 함수형 컴포넌트에서만 사용 가능 | 클래스에서는 사용할 수 없어요 |
클래스형에서 state는 객체 |
this.state = {}로 초기화 필요 |
함수형에서 state는 배열 디스트럭처링 사용 |
[value, setValue] = useState() 형태 |
마무리하며
React를 사용하다 보면 컴포넌트를 수없이 만들어야 하는데, 그 출발점이 바로 함수형 vs 클래스형 컴포넌트의 이해입니다.
요즘은 대부분의 개발자가 함수형 컴포넌트와 Hook 기반으로 개발하고 있고, React 팀도 이 방식을 추천하고 있어요!
하지만, 이전 코드나 문서에서 클래스형 컴포넌트를 만나게 될 일이 분명 있으니
두 가지 모두 알고 있어야 진짜 React를 제대로 아는 것이랍니다! 😉
다음 시간에는 props와 컴포넌트 간 데이터 전달에 대해 알아볼게요.
함께 계속 성장해봐요! 💪✨