React에서 컴포넌트와 프롭스 이해하기
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 초보 개발자 및 프론트엔드 학습자
난이도: 기초 수준 (핵심 개념 설명)
핵심 요약
- 컴포넌트(Component): 재사용 가능한 UI 블록으로, Functional Components와 Class Components 두 가지 형태 존재
- 프롭스(Props):
props객체를 통해 부모→자식 컴포넌트 간 데이터 전달 가능 - 핵심 이점:
props를 통해 동적인 UI 구현, 코드 재사용성 향상, 관심사 분리(Seperation of Concerns)
섹션별 세부 요약
1. 컴포넌트 개요
- 기능: UI를 독립적이고 재사용 가능한 단위로 분할
- 구분:
- function Welcome() → Functional Components (현재 표준)
- class Welcome extends React.Component → Class Components (구식)
- 사용 예시:
```javascript
function Welcome() { return
Hello, React!
; }```
2. 프롭스(Props) 개념
- 기능: 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달
- 구현 방법:
```javascript
function Welcome(props) { return
Hello, {props.name}!
; }```
- 사용 예시:
```javascript
```
3. 주요 이점
- 재사용성: 동일한 컴포넌트를 다른
props로 반복 사용 가능 - 동적 UI:
props를 통해 데이터 변화에 따라 UI 자동 업데이트 - 코드 정리: 관심사 분리 원칙 적용으로 유지보수성 향상
결론
- 실무 팁: 작은 컴포넌트부터 시작해
props전달 연습 → React 앱 개발 기초 확고히 하기 - 핵심 실천:
Functional Components중심으로 개발,props사용으로 컴포넌트 간 데이터 흐름 명확화