component 와 props

1. 💡 컴포넌트(Component)란?

🔹 정의

React에서 UI를 구성하는 최소 단위이며, 재사용 가능한 독립적인 블록입니다.

하나의 컴포넌트는 HTML, CSS, JS를 하나로 묶어 특정 기능이나 뷰를 담당합니다.

✅ 즉, 컴포넌트를 조립하여 전체 UI를 구성합니다.

---

🔹 종류

1. 함수형 컴포넌트 (Function Component)

   • 가장 많이 사용됨
   • React Hooks를 통해 상태 관리 가능

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

2. 클래스형 컴포넌트 (Class Component)

   • 예전 방식 (React Hooks 이전)
   • state, lifecycle methods 사용 가능

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

⚠️ 현재는 함수형 컴포넌트 + Hooks 방식이 표준입니다.

---

🔹 특징

• 재사용 가능: 한 번 만들면 여러 곳에서 재사용 가능
• 분리 및 관리 용이: 각 기능 단위로 컴포넌트를 나눠 관리
• 트리 구조로 구성됨: 부모-자식 관계로 중첩 가능

javascript
function Article() {
	return (
	<>
		<Trips/>
	</>
	)
}

javascript
function App() {
	return (
	<>
		<Header/>
		<Nav/>
		<Article/>
	</>
	)
}

---

2. 📦 Props란?

🔹 정의

Props는 "properties(속성)"의 줄임말로,

부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 데이터 전달 수단입니다.

✅ 컴포넌트 외부에서 내부로 데이터를 전달할 수 있는 단방향 데이터 흐름을 따릅니다.

---

🔹 사용 방법

부모 컴포넌트에서 전달:

javascript
<Article name="React" />

자식 컴포넌트에서 받기:

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

---

🔹 구조 분해 할당으로 props 받기

javascript
const user = {
	nick: "hong",
	name: "gildong"
};

// 1. 기존 방식
const name = user.name;
const nick = user.nick;

// 2. 구조 분해 할당
const {nick, name} = user;

javascript
function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

---

🔹 특징

• 읽기 전용(Read-only): 자식 컴포넌트에서는 props를 직접 수정할 수 없음
• 유연한 데이터 전달: 문자열, 숫자, 배열, 객체, 함수 등 어떤 값이든 전달 가능
• 조건부 렌더링에 활용 가능

---

🔹 예제: 컴포넌트 + props 통합 예시

javascript
function Profile({ name, age }) {
	const ButtonProps = {
		name:"xxx",
		age:20,
		a="a",
		b="b"
	}
  return (
    <div>
	    <Button {...ButtonProps} />
      <h2>{name}님</h2>
      <p>나이: {age}세</p>
    </div>
  );
}

function Button ({name, age, a, b}) {
	return (
		<div>
			<h1>{name}</h1> //xxx
			<p>{age}</p> //20
			...
		</div>
	)
}

function App() {
  return <Profile name="홍길동" age={20} />;
}

✅ 자식 요소 렌더링

javascript
function MyComponent({children}) {
  return (
    <div>
      <h1>타이틀</h1>
      {children}
    </div>
  );
}

✅ 사용 예시

javascript
<MyComponent>
  <p>이 부분이 children입니다</p>
</MyComponent>

렌더링 결과:

html
<div>
  <h1>타이틀</h1>
  <p>이 부분이 children입니다</p>
</div>

---

3. 📌 요약

---

✅ Tip: props vs state