React 컴포넌트란?

📌 React 컴포넌트란? (초급 개발자용 명확한 설명)

React에서 컴포넌트(Component) 는 웹 페이지의 특정 부분(버튼, 입력창, 카드, 목록 등)을 독립적으로 만들고 재사용할 수 있는 조각이야.
쉽게 말해 "UI를 구성하는 블록"이라고 생각하면 돼!

---

1️⃣ 컴포넌트는 왜 필요할까?

✅ 코드를 재사용할 수 있음 → 같은 UI를 여러 번 작성하지 않아도 됨.
✅ 유지보수가 쉬움 → 하나의 컴포넌트를 수정하면, 사용된 모든 곳에서 변경됨.
✅ 웹 페이지를 작은 조각으로 나누어 관리할 수 있음 → 코드가 깔끔해지고 직관적임.

📌 예제: 웹 페이지를 컴포넌트로 나누는 방식

<App>       // 전체 페이지 컴포넌트
 ├── <Header />      // 상단 네비게이션 바
 ├── <MainContent /> // 본문
 │    ├── <Post />   // 개별 글 컴포넌트
 │    ├── <Post />   // 개별 글 컴포넌트
 ├── <Footer />      // 하단 푸터

✅ 각 부분을 독립적인 컴포넌트로 나누면 유지보수가 편리함!

---

2️⃣ 컴포넌트의 종류

React에서는 컴포넌트를 만들 때 두 가지 방법이 있어!
1️⃣ 함수형 컴포넌트 (Functional Component) ✅ (React 최신 방식)
2️⃣ 클래스형 컴포넌트 (Class Component) ❌ (옛날 방식, 현재는 잘 사용하지 않음)

---

3️⃣ 함수형 컴포넌트 (React 최신 방식)

✅ 가장 많이 사용하는 방식!
✅ JavaScript 함수처럼 동작하며, return으로 JSX를 반환함.
✅ useState, useEffect 같은 Hook을 사용하여 상태 관리 가능

📌 예제: 간단한 Button 컴포넌트

import React from 'react';

function Button() {
    return <button>클릭하세요!</button>;
}

export default Button;

✅ 이제 <Button />을 다른 컴포넌트에서 사용할 수 있음!

---

📌 App.js에서 Button 컴포넌트 사용

import React from 'react';
import Button from './Button'; // Button 컴포넌트 가져오기

function App() {
    return (
        <div>
            <h1>React 컴포넌트 배우기</h1>
            <Button /> {/* 버튼 컴포넌트 사용 */}
        </div>
    );
}

export default App;

✅ <Button />을 여러 번 사용해도, 한 번만 만들면 됨!
✅ 즉, 재사용 가능한 UI 블록을 만들 수 있음!

---

4️⃣ Props(프롭스): 컴포넌트에 데이터 전달하기

컴포넌트는 부모 → 자식 컴포넌트로 데이터를 전달할 수 있음.
이때 사용하는 것이 props(프롭스, properties의 줄임말) 야!

📌 Button 컴포넌트에 props 전달 예제

function Button(props) {
    return <button>{props.text}</button>; // props.text 값 사용
}

📌 App.js에서 Button 컴포넌트에 props 전달

function App() {
    return (
        <div>
            <Button text="확인" />
            <Button text="취소" />
        </div>
    );
}

✅ <Button text="확인" /> → props.text 값이 "확인"이 됨
✅ <Button text="취소" /> → props.text 값이 "취소"가 됨
✅ 즉, 같은 Button 컴포넌트를 재사용하면서도 다른 내용을 표시할 수 있음!

---

5️⃣ State(상태)와 이벤트 사용하기

컴포넌트에서 상태(state)를 사용하면 클릭, 입력 등 사용자 동작에 따라 화면을 변경할 수 있어.

📌 useState를 활용한 버튼 클릭 예제

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0); // 상태(state) 생성

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>+1 증가</button>
        </div>
    );
}

export default Counter;

✅ useState(0) → 초기값이 0인 상태 생성
✅ setCount(count + 1) → 버튼 클릭 시 count 값이 증가하고 화면이 자동 업데이트됨

---

6️⃣ 여러 개의 컴포넌트 조합

function Header() {
    return <h1>내 블로그</h1>;
}

function Footer() {
    return <p>© 2024. 모든 권리 보유.</p>;
}

function App() {
    return (
        <div>
            <Header />
            <p>환영합니다! 여기는 제 블로그입니다.</p>
            <Footer />
        </div>
    );
}

✅ <Header />, <Footer /> 같은 컴포넌트를 조합하여 완전한 페이지를 구성 가능!

---

🎯 최종 정리

개념	설명
컴포넌트란?	UI를 구성하는 독립적인 블록 (버튼, 리스트, 입력창 등)
컴포넌트의 종류	함수형 컴포넌트 ✅ (React 최신 방식)
재사용성	한 번 만든 컴포넌트를 여러 곳에서 사용 가능
Props (프롭스)	부모 → 자식 컴포넌트로 데이터 전달
State (상태)	사용자 입력이나 동작에 따라 화면을 변경

---

🚀 이제 컴포넌트 개념을 완벽하게 이해했어!

✔ 컴포넌트는 "웹 페이지를 작은 조각으로 나누어 관리하는 블록"
✔ 코드를 재사용할 수 있고, 유지보수가 편리함
✔ React에서 가장 중요한 개념 중 하나이므로 꼭 익혀야 함!

💡 이제 직접 컴포넌트를 만들어보면서 익혀보자!
추가 질문 있으면 편하게 물어봐! 😊