[React] Components 와 Props

React는 Component-Based Architecture를 채택한 프레임워크입니다. 이는 UI를 컴포넌트라는 작은 단위로 나누고, 이들을 조합하여 전체 애플리케이션을 구성하는 방식입니다. 컴포넌트를 모듈화 하여 개발하면 재사용성이 높아지고 유지보수가 쉬워진다는 장점이 있습니다.

---

React Component란?

React Component는 React 애플리케이션의 UI를 구성하는 독립적이고 재사용 가능한 단위입니다. 

컴포넌트는 두 가지로 정의할 수 있습니다.

1. 입력(Input) : Props

2. 출력(Output) : React Element(화면에 표시되는 UI)

즉, React Component는 전달받은 Props를 기반으로 화면에 표시될 React Element를 생성합니다.

function Greeting(props){
 return <h1>Hello, {props.name}!</h1>;
}

Greeging 컴포넌트는 props.name에 따라 다른 텍스트를 렌더링합니다.

---

Props란 무엇인가?

Props는 "Properties"의 줄임말로, 컴포넌트에 전달할 데이터를 담고 있는 자바스크립트 객체입니다. Props를 사용하면 컴포넌트 간에 데이터를 주고받을 수 있습니다.

Props의 특징

1. Read-Only(읽기 전용)

• Props는 변경할 수 없습니다.
• 동일한 Props에 대해 항상 동일한 UI를 반환하므로 React의 순수 함수 원칙을 따릅니다.

2. Immutable(불변성)

• 컴포넌트 내부에서 Props를 직접 수정할 수 없습니다.
• Props를 수정하려면 상위 컴포넌트에서 새로운 값을 전달해야 합니다.

---

Props 사용법

Props 전달하기

function Welcome(props) {
  return <h1>Welcome, {props.name}!</h1>;
}

// 부모 컴포넌트에서 Props 전달
function App() {
  return <Welcome name="React" />;
}

Welcom 컴포넌트는 부모 컴포넌트 App에서 name이라는 Props를 전달받아 렌더링 합니다.

 

Props 기본값 설정

function Greeting(props) {
  return <h1>{props.message || 'Hello, World!'}</h1>;
}

Props가 전달되지 않을 경우, 기본값을 설정하여 컴포넌트가 오류 없이 작동하도록 할 수 있습니다.

---

Recat Component의 종류

React 컴포넌트는 크게 두 가지 방식으로 정의할 수 있습니다.

1. Function Component

• 함수 형태로 정의합니다.
• 가볍고 간결하며 React Hooks를 사용할 수 있습니다.

function Hello(props) {
  return <h1>Hello, {props.name}!</h1>;
}

---

2. Class Component

• 클래스 형태로 정의합니다.
• state와 라이프사이클 메서드가 필요할 때 사용되었지만, 최신 React에서는 Hooks로 대부분 대체되었습니다.

class Hello extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

** 컴포넌트 이름은 반드시 대문자로 시작해야 합니다.

React는 컴포넌트와 HTML 태그를 구분하기 위해 컴포넌트 이름을 대문자로 시작하는 규칙을 사용합니다.

---

Component 합성(Composition)

컴포넌트를 합성하면 작은 컴포넌트를 조합하여 더 큰 컴포넌트를 구성할 수 있습니다.

function Avatar(props) {
  return <img src={props.url} alt="Avatar" />;
}

function UserProfile(props) {
  return (
    <div>
      <Avatar url={props.avatarUrl} />
      <h2>{props.name}</h2>
    </div>
  );
}

UserProfile은 Avatar 컴포넌트를 포함하여 유저 프로필 UI를 구성합니다.

---

Component 추출(Extraction)

큰 컴포넌트에서 특정 부분을 추출하여 별도의 컴포넌트로 만들면, 재사용성이 높아지고 개발 속도를 향상할 수 있습니다.

function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Click Me" onClick={() => alert('Clicked!')} />
      <Button label="Submit" onClick={() => alert('Submitted!')} />
    </div>
  );
}

---

Summary

• React는 컴포넌트 기반으로 UI를 구성합니다.
• Props는 컴포넌트 간 데이터를 전달하는 자바스크립트 객체입니다.
  • 읽기 전용이며, 컴포넌트에서 직접 수정할 수 없습니다.
• React 컴포넌트는 함수 또는 클래스 형태로 정의됩니다.
• 컴포넌트 합성과 추출을 통해 코드를 모듈화 하고 재사용성을 극대화할 수 있습니다.

---

참고 강의 : 처음 만난 리액트