개요
오늘은 React의 Component와 Props에 대해 정리해야지.
1. Component란?
UI를 구성하는 독립적인 단위로, 재사용이 가능한 JavaScript 함수 또는 클래스이다.
화면의 특정 부분을 렌더링하며, 데이터(Propos 또는 State)에 따라 다르게 동작할 수 있다.
* Element와의 차이?
-> React Element는 UI를 표현하는 객체이다.
-> React Component는 여러 개의 Element를 포함할 수 있는 재사용 가능한 단위이다.
1-1. 특징
: 재사용 가능
-> 하나의 컴포넌트를 여러 곳에서 사용이 가능하다.
: 독립적
-> 각 컴포넌트는 독립적으로 동작하며, 특정 부분만 변경이 가능하다.
: 구성 가능
-> 여러 개의 작은 컴포넌트들을 조합해 큰 컴포넌트를 생성하는 것이 가능하다.
: 렌더링 최적화
-> 변경된 부분만 렌더링해 성능 최적화를 이룬다.
1-2. Component 만들기
함수형 컴포넌트
import React from 'react';
function Greeting(props: { name: string }) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
-> Greeint 함수형 컴포넌트는 props.name(= propos 객체)을 받아 Hello, {name}! 을 화면에 출력한다.
클래스 컴포넌트
import React, { Component } from 'react';
class Greeting extends Component<{ name: string }> {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default Greeting;
-> 클래스 컴포넌트는 React.Compoent를 상속받아서 만들어진다.
-> this.props.name을 사용해 부모로부터 전달받은 name을 화면에 출력한다.
-> render() 메서드를 통해 JSX를 반환한다.
1-3. 컴포넌트 렌더링
import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));
-> ReactDOM.render()를 사용해 Greeting 컴포넌트를 root 요소에 렌더링한다.
-> 이를 통해 React 애플리케이션을 실제 HTML 문서의 특정 위치에 삽입하고 실제 DOM에 렌더링 한다.
1-4. 컴포넌트 합성
-> 여러 개의 컴포넌트를 합쳐 하나의 컴포넌트를 만드는 것이다.
function Card(props: { children: React.ReactNode }) {
return <div className="card">{props.children}</div>;
}
function UserProfile() {
return (
<Card>
<h2>Alice</h2>
<p>Software Engineer</p>
</Card>
);
}
-> Card 컴포넌트에는 children을 받아서 <div className="card"> 내부에 삽입한다.
-> 그 뒤, UserProfile 컴포넌트 내부에서 h2, p 태그를 children에 넣어주어 하나의 거대한 컴포넌트로 만들어 주었다.
function Header() {
return <h1>Welcome to My Page</h1>;
}
function Content() {
return <p>This is the main content of the page.</p>;
}
function Page() {
return (
<div>
<Header />
<Content />
</div>
);
-> 컴포넌트들 사이에서도 합성이 가능한데, Header 컴포넌트와 Content 컴포넌트를 Page 컴포넌트 내부에 넣어 거대한 컴포넌트를 만들었다.
1-5. 추출
-> 큰 컴포넌트를 작은 컴포넌트로 추출해 유지보수에 용이하게 작성하는 방법이다.
function Avatar(props: { src: string; alt: string }) {
return <img src={props.src} alt={props.alt} className="avatar" />;
}
function UserInfo(props: { name: string; avatarUrl: string }) {
return (
<div>
<Avatar src={props.avatarUrl} alt={props.name} />
<h2>{props.name}</h2>
</div>
);
}
-> Avatar 컴포넌트를 따로 분리해서 UserInfo 컴포넌트에 넣어주는 방식으로 컴포넌트를 따로 분리해서 유지보수에 용이하게 작성했다.
-> 이제 이 Avatar 컴포넌트는 다른 컴포넌트에 넣어주어 재사용이 가능해졌다.
2. Props
Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 읽기 전용 데이터이다.
2-1. 특징
1) 읽기 전용
-> Props는 자식 컴포넌트 내부에서 변경할 수 없다.
2) 데이터 흐름이 부모 -> 자식으로 이어지는 단방향 흐름이다.
3) 즉, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달한다.
function UserProfile(props: { name: string; age: number }) {
return (
<div>
<h2>Name: {props.name}</h2>
<p>Age: {props.age}</p>
</div>
);
}
export default UserProfile;
<UserProfile name="Alice" age={30} />
-> UserProfile 컴포넌트는 name과 age라는 props를 받는다.
-> 전달 받은 props를 <h2>와 <p> 태그를 통해 화면에 출력한다.
'Web&Hybrid > React' 카테고리의 다른 글
| [React] React LifeCycle (0) | 2025.02.11 |
|---|---|
| [React] State란? (0) | 2025.02.11 |
| [React] Element란? (1) | 2025.02.08 |
| [React] JSX란? (0) | 2025.02.08 |
| [React] TypeScript란? (1) | 2025.02.07 |