React Component 정의
UI를 구성하는 독립적이고 재사용 가능한 코드 조각입니다. 화면을 구성하는 버튼 하나, 카드 하나, 헤더 전체가 마치 레고 블록 처럼 각각 하나의 Component가 될 수 있습니다.
규칙
React에서 Component는 JavaScript 함수이고, 단 두 가지 규칙이 있습니다.
1. 함수명이 대문자로 시작해야합니다.
- 예: myButton ❌ → MyButton ✅
2. JSX를 반환해야합니다.
React-Component 예시:
function MyButton() {
return <button>나는 버튼입니다</button>
}
두 가지 형태
1. Class Component (구식)
class MyButton extends Reac.Component {
render () {
return <button>{this.props.label}</button>
}
}
2. Functional Component (권장)
function MyButton(props) {
return <button>{props.label}</button>;
}
✅ 왜 두 가지 형태가 존재하는가?
-> React의 진화 과정과 연관이 있다.
React 초기 (2013년경)
- Class Component만 존재
- 함수형은 상태 관리 불가능 → 단순 UI 표현용만 가능
- 상태 필요 → Class로 만들어야 함
// 옛날에는 이렇게 해야 했음
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>카운트: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
증가
</button>
</div>
);
}
}
Hooks 등장 (2019년, React 16.8)
- Functional Component에 state 기능하게 만듦 (useState, useEffect 등)
- Functional이 Class보다 간단하고 강력함을 깨달음
// Hooks 이후
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
✅ 왜 Class는 아직도 존재하는가?
1. 기존코드 - 오래된 프로젝트들이 Class로 작성됨
2. 호환성 - 깨진 코드 없으려고 유지
3. 드물지만 필요한 경우 - Error Boundary 같은 기능은 Class만 지원
특징
1. 재사용 가능
<Button label="저장" />
<Button label="삭제" />
<Button label="취소" />
2. 조합 가능 (Composition)
function App() {
return (
<div>
<Header />
<Body />
<Footer />
</div>
);
}
3. 독립적
- 각 Component가 자체 상태 관리
'Frontend > React' 카테고리의 다른 글
| React 앱 준비하기 (0) | 2026.03.06 |
|---|---|
| React는 어떤 언어일까? (0) | 2026.03.03 |