React의 컴포넌트 개념과 JSX를 사용하여 UI를 표현하는 방법, 그리고 Props로 데이터를 전달하는 방법에 대해 자세히 알아보겠습니다.
React 컴포넌트란?
React 컴포넌트는 독립적이고 재사용 가능한 코드의 조각으로, 애플리케이션의 UI를 구성하는 기본 단위입니다. 컴포넌트는 자신만의 상태와 생명주기를 가질 수 있으며, 다른 컴포넌트와 조합하여 복잡한 UI를 구축할 수 있습니다.
1. 함수형 컴포넌트
함수형 컴포넌트는 JavaScript 함수로 정의되며, Props를 받아 JSX를 반환합니다.
function Welcome(props) {
return <h1>안녕하세요, {props.name}님!</h1>;
}2. 클래스형 컴포넌트
클래스형 컴포넌트는 React.Component를 상속받아 정의됩니다.
class Welcome extends React.Component {
render() {
return <h1>안녕하세요, {this.props.name}님!</h1>;
}
}JSX로 UI 표현하기
JSX는 JavaScript 내에서 XML과 유사한 문법을 사용하여 UI를 표현할 수 있게 해주는 문법 확장입니다. JSX를 사용하면 코드의 가독성을 높이고 UI 구조를 직관적으로 파악할 수 있습니다.
JSX의 장점
- 가독성 향상: HTML과 유사한 문법으로 UI를 정의하여 코드의 이해도를 높입니다.
- 표현력 강화: JavaScript의 모든 기능을 활용하여 동적인 UI를 만들 수 있습니다.
- 에러 감소: 컴파일 단계에서 오류를 잡아주어 안정성을 높입니다.
const element = (
<div>
<h1>React 배우기</h1>
<p>JSX를 사용하면 UI를 쉽게 표현할 수 있습니다.</p>
</div>
);Props로 데이터 전달하기
Props는 컴포넌트 간에 데이터를 전달하기 위한 방법으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달됩니다.
Props의 특징
- 읽기 전용: Props는 변경할 수 없으며, 컴포넌트는 전달받은 Props를 수정하지 않습니다.
- 단방향 데이터 흐름: 데이터는 부모에서 자식으로만 전달됩니다.
Props 사용 예시
부모 컴포넌트
function App() {
return <Greeting name="홍길동" />;
}자식 컴포넌트
function Greeting(props) {
return <h1>안녕하세요, {props.name}님!</h1>;
}- 간단한 프로필 카드 만들기
1. ProfileCard 컴포넌트 생성
function ProfileCard(props) {
return (
<div className="profile-card">
<img src={props.image} alt={`${props.name}의 프로필 사진`} />
<h2>{props.name}</h2>
<p>{props.description}</p>
</div>
);
}2. App 컴포넌트에서 ProfileCard 사용
function App() {
return (
<ProfileCard
name="홍길동"
image="https://example.com/hong.jpg"
description="프론트엔드 개발자입니다."
/>
);
}React의 컴포넌트와 JSX, 그리고 Props는 효율적이고 재사용 가능한 UI를 구축하는 데 핵심적인 역할을 합니다. 컴포넌트를 활용하여 애플리케이션을 모듈화하고, JSX로 UI를 직관적으로 표현하며, Props를 통해 컴포넌트 간에 데이터를 원활하게 전달할 수 있습니다.
이러한 개념들을 잘 이해하고 활용하면 복잡한 애플리케이션도 손쉽게 관리하고 개발할 수 있습니다.
개발