[React] Component와 Props

개요

React Element란?

 

오늘은 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> 태그를 통해 화면에 출력한다.