리액트를 처음 배우는 입장에서 "컴포넌트는 무엇이고, props는 왜 필요한지"가 혼란스러웠다..
한 번 알아보장

---

1. 리액트 컴포넌트란?

리액트 컴포넌트는 UI(화면)을 만드는 가장 기본적인 단위이다.

자바스크립트 함수와 비교

• 리액트 컴포넌트를 함수로 생각하면 쉽게 이해할 수 있다.
• 함수는 입력(input)을 받아서 출력(output)을 반환한다.

function add(a,b) {
 return a+b; 
}

여기서 입력은 a,b이고, 출력은 두 숫자의 합이다.

리액트 컴포넌트

• 리액트 컴포넌트도 함수처럼 동작한다.
• 컴포넌트는 입력(props)을 받아서 출력(리액트 엘리먼트)를 반환한다.

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

• 입력: props 객체 (name이라는 속성 포함)
• 출력:

  Hello, John!

  같은 리액트 엘리먼트

---

2. props란?

• props(properties)는 컴포넌트에 전달되는 입력 값이다.

props의 역할

• 컴포넌트에 필요한 데이터를 전달
• 데이터를 기반으로 동적으로 화면을 렌더링

props의 특징

• 읽기 전용: 컴포넌트 내부에서 props를 수정할 수 없다.
• 부모 컴포넌트에서 자식 컴포넌트로 전달 된다.

예제:

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

<Greeting name="John" />

• 여기서:

• name="John"은 부모 컴포넌트가 전달한 props

• props.name은 Greeting 컴포넌트가 사용하는 데이터

  ---

  
  
  

3. 컴포넌트와 props의 관계

1. 컴포넌트의 입력:props

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하기 위해 props를 사용한다.

2. 컴포넌트의 출력: 리액트 엘리먼트

• props를 받아서 동적으로 리액트 엘리먼트를 생성하고 반환한다.

예제:

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

<Button color="blue" label="Click me" />

• 여기서:
• color="blue"와 label="Click me"는 props로 전달.
• Button 컴포넌트는 <button class="blue">Click me</Button> 엘리먼트를 반환

---

4. props로 컴포넌트를 재사용 가능하게 만들기

• 컴포넌트는 props를 사용하여 재사용 가능한 구조를 제공한다.
• 동일한 컴포넌트를 다른 데이터와 함께 여러번 사용할 수 있다.

예제:

function Book(props) {
  return (
  	<div>
      <h1>{props.title}</h1>
      <p>{props.author}</p>
    </div>
  );
}

<Book title="React Basics" author="John Doe" />
<Book title="Javascript Mastery" author="Jane Smith" />

• Book 컴포넌트는 title과 author라는 props를 사용한다.
• 결과적으로 두 개의 서로 다른 책 정보를 렌더링할 수 있다.

---

5. 리액트 컴포넌트와 일반 함수의 차이

• 일반 자바스크립트 함수는 단순히 값을 계산하거나 반환한다.
• 리액트 컴포넌트는 props를 받아 리액트 엘리먼트(HTML-like 구조)를 반환하며, 화면에 렌더링 된다.

일반 함수	리액트 컴포넌트
단순히 값을 계산하거나 반환	UI를 반환(리액트 엘리먼트).
데이터나 계산 결과를 반환	사용자 인터페이스를 반환
return으로 숫자, 문자열 등 반환.	return으로 JSX 반환.

---

6. 전체적인 흐름

컴포넌트와 props가 함께 동작하는 과정

1. 부모 컴포넌트가 자식 컴포넌트에 props를 전달
2. 자식 컴포넌트가 props를 사용해 동적으로 UI를 생성
3. 리액트가 생성된 리액트 엘리먼트를 DOM에 렌더링

예제 전체 흐름:

function App() {
 return (
   <div>
    <Greeting name="Alice" />
    <Greeting name="Bob" />
   </div>
 );
}

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

1. App 컴포넌트는 두 개의 Greeting 컴포넌트를 호출하면서 name props를 전달
2. 각 Greeting 컴포넌트는 name 값에 따라 다른 엘리먼트를 생성.
3. 최종 결과:

<div>
  <h1>Hello, Alice!</h1>
  <h1>Hello, Bob!</h1>
</div>

---

7. 비유로 이해하기

• 리액트 컴포넌트를 함수 공장으로 생각한다.
• props는 공장에 들어가는 재료이다.
• 공장은 재료(props)를 받아서 특정한 결과물(UI)을 만든다.

비유 예:

function Fruit(props) {
  return <p>This is a {props.type}.</p>;
}

<Fruit type="apple" />
<Fruit type="banana" />

• Fruit 공장에 들어가는 재료(type="apple", type="banana")에 따라 다른 결과물이 생성된다.

---

8. 정리

• 리액트 컴포넌트는 UI를 반환하는 함수와 비슷하다.
• props는 컴포넌트의 입력값으로, 부모 컴포넌트가 데이터를 전달하는 데 사용된다.
• 컴포넌트와 props를 사용하면 코드의 재사용성이 높아지고, 더 적은 코드로 유연한 UI를 구현할 수 있다.