[React] Quick Start - 1

📌 React Quick Start 정리 (v19 기준)

참고: https://react.dev/learn

---

React 앱은 컴포넌트 (Component) 로 구성되어 있다.
컴포넌트는 UI(사용자 인터페이스)의 하나의 독립적인 부분을 담당하며, 자체적인 로직과 UI를 가질 수 있다.
 

✅ 컴포넌트란 ?

리액트의 핵심 개념 중 하나는 "컴포넌트 기반 아키텍처" 라는 것.
즉, 리액트는 컴포넌트 단위로 구성되며, 각각의 컴포넌트는 하나의 UI 조각을 담당한다.
 

➡️ 컴포넌트 (Component) = UI의 개별적인 조각 ⬅️

 
✔️ 작은 버튼 하나부터 페이지 전체까지 컴포넌트가 될 수 있다.
✔️ 재사용이 가능하며, 독립적으로 동작할 수 있는 UI의 기본 단위다.
 

✅ 리액트에서 컴포넌트는 어떻게 정의될까 ?

리액트에서 컴포넌트는 자바스크립트 함수로 정의된다. 
이 함수는 HTML과 비슷한 JSX(마크업)을 반환해서 화면을 구성한다.

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

 

✅ 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다 !

✔️ 컴포넌트 내부에서 다른 컴포넌트를 사용하는 것을 컴포넌트 중첩 (Nesting Components) 라고 한다.

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

 

⚠️ 주의할 점

✅ 리액트 컴포넌트는 반드시 대문자로 시작해야한다
✔️ 소문자로 시작하면 리액트가 일반 HTML 태그로 인식할 수 있음.
✔️ 예: <MyButton /> (⭕) / <myButton  /> (❌)

✅ export default 는 언제 붙는걸까 ?

export default 키워드는 파일에서 기본적으로 내보낼(Main) 컴포넌트를 지정할 때 사용된다.
해당 키워드를 사용하면 다른 파일에서 쉽게 가져올 수 있으며,
불러올 때 반드시 파일명과 동일한 이름을 사용할 필요는 없다.

// App.js
import MyButton from './MyButton';  // 원래 이름 그대로 가져옴
import SomethingElse from './MyButton';  // 다른 이름으로 가져와도 가능

export default function App() {
  return (
    <div>
      <h1>안녕하세요, React!</h1>
      <MyButton />
      <SomethingElse />
    </div>
  );
}

 

📌 JSX 란 ?

(JavaScript XML)

 

위에서 컴포넌트 정의에 대해 이야기할 때, JSX 라는 단어가 잠깐 등장했었다.
만약 "마크업"이라는 단어만 보고 무심코 지나쳤다면, 여기서 확실히 짚고 넘어가자!
 

✅ JSX (JavaScript XML)란?

✔️ JSX은 리액트에서 UI를 정의하는 문법이다.
✔️ HTML과 비슷한 형태를 가지고 있지만,
✔️ JavaScript는 코드 안에서 사용할 수 있는 마크업 형식이다.

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

✔️ element 변수 안에 HTML처럼 보이는 JSX를 넣을 수 있다.
 

✅ JSX 문법 규칙

1️⃣ 태그는 반드시 닫아야 한다.
✔️ JSX는 HTML보다 더 엄격한 문법을 사용한다.
✔️ <br />, <img /> 같은 단일 태그도 닫아야 한다.
 
2️⃣ 컴포넌트는 반드시 하나의 부모 요소로 감싸야 한다.
✔️ JSX에서는 여러 개의 태그를 직접 반환할 수 없다.
✔️ 컴포넌트가 여러 개의 JSX 요소를 반환할 때는 하나의 부모 요소로 감싸야 한다.
 
❌ 잘못된 JSX (부모 요소 없음)

function MyComponent() {
  return (
    <h1>안녕하세요!</h1>
    <p>React를 배우고 있습니다.</p>
  );
}

 
⭕️ 올바른 JSX (부모 <div>로 감싸기)

function MyComponent() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>React를 배우고 있습니다.</p>
    </div>
  );
}

 
*️⃣ 빈 Fragment (<>...</>) 사용하기
✔️ JSX에서 <div> 같은 불필요한 추가 태그 없이 JSX를 그룹화하고 싶다면,
✔️ React Fragment (<>...</>)를 사용하면 된다.

function MyComponent() {
  return (
    <>
      <h1>안녕하세요!</h1>
      <p>React를 배우고 있습니다.</p>
    </>
  );
}