리액트 컴포넌트 & JSX 완전 이해｜React UI 기초 개념 정리와 실습 예제

📘 리액트 스터디 시리즈 3편

JSX와 컴포넌트의 기초｜React UI의 시작은 이렇게 만들어집니다

안녕하세요! 오늘은 리액트에서 가장 핵심이 되는 개념, 바로

JSX와 컴포넌트

에 대해 배워보겠습니다 😎

이 두 가지를 제대로 이해하는 것이 리액트의 시작이자 끝이라고 해도 과언이 아니에요.
그럼, 함께 시작해볼까요?

---

💡 JSX란 무엇인가요?

JSX (JavaScript XML)은 자바스크립트 안에서 HTML을 쓰는 문법입니다.

const element = <h1>Hello, React!</h1>;

위 코드는 자바스크립트 코드이면서 동시에 HTML처럼 보이죠?
하지만 실제로는 React.createElement()로 변환되는 자바스크립트 문법입니다.

• ✅ HTML처럼 UI를 직관적으로 작성할 수 있어요
• ✅ JSX는 브라우저가 직접 이해하지 못하므로 Babel 같은 컴파일러가 필요해요

🔥

주의!

JSX 문법에는 몇 가지 규칙이 있어요:

• 📌 하나의 부모 태그로 감싸야 함
• 📌 class → className 으로
• 📌 style은 객체 형태로 작성

return (
  <div className="container" style={{ color: 'blue' }}>
    <h1>Hello JSX!</h1>
  </div>
);

---

🧩 컴포넌트란?

컴포넌트는 리액트 UI의 가장 작은 단위입니다. 즉, UI를 구성하는 조각이죠.

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

1️⃣ 함수형 컴포넌트 (주로 사용됨)

function Welcome() {
  return <h1>환영합니다!</h1>;
}

2️⃣ 화살표 함수로도 가능

const Welcome = () => <h1>환영합니다!</h1>;

3️⃣ 클래스형 컴포넌트 (예전 방식)

class Welcome extends React.Component {
  render() {
    return <h1>환영합니다!</h1>;
  }
}

🎯 최근에는 함수형 + Hooks 방식이 표준입니다!

---

🔗 컴포넌트 사용 방법

컴포넌트는 태그처럼 사용할 수 있습니다.

function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

➡️ 이렇게 하면 "환영합니다!"가 두 번 출력돼요 😄

---

📦 props로 컴포넌트에 데이터 전달하기

props는 컴포넌트에 데이터를 전달하는 방법입니다.

function Welcome(props) {
  return <h1>안녕하세요, {props.name}님!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="영희" />
      <Welcome name="철수" />
    </div>
  );
}

➡️ 결과: "안녕하세요, 영희님!" / "안녕하세요, 철수님!"

중요:

props는 읽기 전용입니다. 변경할 수 없어요.

---

🛠 실습 - 나만의 첫 컴포넌트 만들기

📋 목표: 나만의 버튼 컴포넌트를 만들고 재사용하기

function CustomButton({ label, color }) {
  return (
    <button style={{ backgroundColor: color }}>
      {label}
    </button>
  );
}

function App() {
  return (
    <div>
      <CustomButton label="확인" color="green" />
      <CustomButton label="취소" color="red" />
    </div>
  );
}

✨ 이제 컴포넌트를 모듈처럼 재사용할 수 있다는 걸 느껴보세요!

---

🧠 정리 - 오늘 배운 핵심 포인트

• ✔️ JSX는 자바스크립트 안에 HTML을 작성하는 문법
• ✔️ 컴포넌트는 UI를 구성하는 기본 단위
• ✔️ 함수형 컴포넌트를 주로 사용하며, props로 데이터를 전달
• ✔️ 재사용 가능한 UI 만들기의 시작!

---

📌 다음 편 예고

다음 4편에서는 리액트에서 이벤트를 처리하고 상태를 관리하는 방법을 배워볼 거예요!
바로 useState의 세계로 가보죠 🚀

놓치지 마세요! 🤓

---

💬 도움이 되셨다면 댓글로 알려주세요!
📩 블로그 구독도 잊지 마시고요 🙌