📘 [Recat] React 핵심 - 컴포넌트, JSX, 속성, 상태 등 - 1

2025년 04월 02일 in Dev / Frontend on #React #Web

[Recat] React 핵심 - 컴포넌트, JSX, 속성, 상태 등 - 1

왜 컴포넌트가 중요한가?

• UI 구조화: 애플리케이션 전체를 컴포넌트 단위로 나누어 구조화합니다.
• 재사용성: 한 번 만든 컴포넌트를 여러 곳에서 재사용할 수 있습니다.
• 유지보수 용이: 수정이 필요한 경우, 컴포넌트 내부만 변경하면 됩니다.
• 관심사의 분리: 각 컴포넌트는 자신의 역할만 담당하기 때문에 코드가 명확해집니다.
• 협업에 유리: 여러 개발자가 각자의 컴포넌트를 담당해 개발할 수 있습니다.

컴포넌트 기반 접근의 장점

• 코드 중복 감소 및 수정 용이
• 관련 코드(HTML, CSS, JS)의 함께 관리
• 디자인과 기능의 명확한 분리
• 앱 규모가 커져도 효율적인 개발 가능

리액트 외 다른 프레임워크도 사용

이러한 컴포넌트 중심 개발 방식은 리액트에만 국한되지 않고, Vue, Angular, Svelte, 심지어는 Flutter와 같은 모바일 프레임워크에서도 사용됩니다.

리액트의 첫걸음: 프로젝트 구조와 JSX, 그리고 컴포넌트 만들기

리액트 프로젝트를 처음 실행하면 기본적으로 다양한 파일과 폴더가 생성됩니다. 그중 public/index.html 파일은 기본적인 HTML 마크업만 포함하고 있으며, 우리가 실제로 화면에서 보는 UI 요소는 이곳에 없습니다. 이유는 바로 화면에 보이는 모든 UI가 리액트를 통해 생성되기 때문입니다.

index.html과 리액트의 연결 고리

• index.html에는 리액트 앱이 삽입될 root DOM 요소가 있습니다.
• 실제 콘텐츠는 자바스크립트 파일을 통해 동적으로 렌더링됩니다.
• index.jsx 파일에서 앱의 시작점을 정의하고 있으며, 그 안에서 App.jsx 컴포넌트를 불러옵니다.

JSX란 무엇인가?

• App.jsx 파일을 보면 자바스크립트 코드 안에 HTML처럼 보이는 문법이 있습니다. 이것이 바로 JSX (JavaScript Syntax Extension) 입니다.
• JSX를 사용하면 자바스크립트 파일 내에 HTML 마크업을 직접 작성할 수 있어 UI 구성에 매우 유용합니다.
• 단, JSX는 브라우저가 이해할 수 없는 문법이므로, 개발 서버가 브라우저가 이해할 수 있는 코드로 변환(트랜스파일) 해줍니다.

리액트 컴포넌트의 기본

• App.jsx는 하나의 컴포넌트입니다. 컴포넌트는 리액트에서 UI를 구성하는 핵심 단위입니다.
• 리액트 컴포넌트는 자바스크립트 함수처럼 작성되며, 다음 두 가지 규칙을 따라야 합니다:
  1. 함수 이름은 대문자로 시작해야 합니다.
  2. 렌더링 가능한 JSX를 반환해야 합니다.

리액트 컴포넌트 생성과 사용의 첫걸음

리액트 컴포넌트는 단순한 자바스크립트 함수입니다. 따라서 일반 함수처럼 선언할 수 있지만, 다음 두 가지 규칙을 따라야 합니다:

1. 함수 이름은 대문자로 시작해야 합니다.
2. JSX를 반환해야 합니다. (즉, 화면에 렌더링될 마크업)

컴포넌트 만들기

예를 들어, 기존 App 컴포넌트에 있던 헤더 마크업을 분리해 Header 컴포넌트를 생성할 수 있습니다.

function Header() {
  return (
    <header>
      <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        Fundamental React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

컴포넌트 사용하기

만든 컴포넌트는 JSX 문법 안에서 HTML 태그처럼 사용할 수 있습니다.

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

• 컴포넌트 태그는 반드시 슬래시(/) 를 포함한 자동 닫힘 문법 또는 시작/종료 태그를 사용해야 합니다.
• JSX는 브라우저가 직접 이해하지 못하므로, 개발 서버에서 일반 자바스크립트로 변환되어 실행됩니다.

💡 리액트 컴포넌트가 실제로 화면에 렌더링되는 과정

1. 컴포넌트는 실제 HTML에 보이지 않는다

• 브라우저에서 페이지 소스를 보면 Header나 App 같은 커스텀 컴포넌트는 보이지 않습니다.
• 대신 <div id="root">와 리액트가 최종적으로 변환한 내장 HTML 요소들만 있습니다.

2. JSX는 브라우저에서 직접 실행되지 않는다

• JSX는 브라우저가 이해하지 못하기 때문에 개발 서버에서 변환되어 일반 자바스크립트로 바뀝니다.
• 이 작업은 index.jsx에서 수행됩니다.

3. index.jsx가 리액트 앱의 진입점

• index.html은 기본적인 HTML 구조만 포함하고 있고, <div id="root">가 핵심입니다.
• index.jsx에서 App 컴포넌트를 가져와 createRoot().render(<App />)를 통해 해당 div에 렌더링합니다.

4. 리액트가 렌더링하는 방식

• createRoot()는 리액트 앱을 기존 DOM 요소 안에 삽입할 수 있도록 만듭니다.
• render()는 우리가 만든 컴포넌트를 실제 HTML 요소로 변환하여 <div id="root"> 안에 삽입합니다.

5. 컴포넌트 트리 (Component Tree)

• App → Header처럼 컴포넌트는 중첩되어 트리 구조를 형성합니다.
• 리액트는 이 컴포넌트 트리를 분석해서 최종 HTML 구조를 만듭니다.

6. 왜 컴포넌트 이름은 대문자로 시작해야 하나요?

• 소문자로 시작하면 리액트는 이를 기본 HTML 태그로 오해합니다.
• 대문자로 시작하면 사용자 정의 컴포넌트로 인식합니다.
• 이는 내장 요소와 커스텀 요소 간의 이름 충돌 방지를 위한 규칙입니다.

동적 값 출력 및 활용

JSX는 HTML처럼 보이지만, 중괄호 {}를 사용해 자바스크립트 표현식을 삽입할 수 있음

//reactDescriptions 배열에서 랜덤으로 하나의 단어를 선택하기 위한 준비
const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) { //genRandomInt(2)`는 0, 1, 2 중 무작위 정수 반환
  return Math.floor(Math.random() * (max + 1));
}
//Header 컴포넌트 내 동적 표현 적용
function Header() {
	// 변수로 활용 description으로 지정하여 return값에 사용한다. javascript 표현은 코드 밖으로 옮기면 jsx코드가 조금 깔끔해 질 수 있다.
	const description = reactDescriptions[genRandomInt(2)]

  return (
    <header>
      <img src="src/assets/react-core-concepts.png" alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
	    {/*reactDescriptions[genRandomInt(2)]}*/}
        {description} React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

동적 HTML Attributes(속성) 설정 & 이미지 파일 로딩

// 이미지 파일을 사용하는 경우 import하여 사용하는 것을 권장
import reactImg from './assets/react-core-concepts.png'
//reactDescriptions 배열에서 랜덤으로 하나의 단어를 선택하기 위한 준비
const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];

function genRandomInt(max) { //genRandomInt(2)`는 0, 1, 2 중 무작위 정수 반환
  return Math.floor(Math.random() * (max + 1));
}

//Header 컴포넌트 내 동적 표현 적용
function Header() {
  // 변수로 활용 description으로 지정하여 return값에 사용한다. javascript 표현은 코드 밖으로 옮기면 jsx코드가 조금 깔끔해 질 수 있다.
  const description = reactDescriptions[genRandomInt(2)]

  return (
    <header>
      {/* <img src="src/assets/react-core-concepts.png" alt="..." /> */}
      {/* src속성에 경로 직접 입력은 비추천 배포 시 이미지가 사라질 수 있으며, 최적화에 불리함 */}
      <img src={reactImg} alt="Stylized atom" />
      <h1>React Essentials</h1>
      <p>
        {/* 대신 import 문으로 이미지 파일을 JS 변수로 불러오고, JSX에서 중괄호 문법으로 참조함 */}
        {/* 이 방식은 빌드 도구가 이미지 파일까지 자동으로 번들링해 배포에 적합 */}
        {description} React concepts you will need for almost any app you are going to build!
      </p>
    </header>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <h2>Time to get started!</h2>
      </main>
    </div>
  );
}

Prop(속성)으로 컴포넌트 재사용

1. 컴포넌트의 재사용 가능성

• 리액트 컴포넌트는 재사용을 목적으로 설계됨.
• 한 번 만든 컴포넌트를 여러 번 활용할 수 있음.
• 단, 각 컴포넌트는 다른 데이터를 가지고 동작해야 유의미함.

2. Props란?

• props는 컴포넌트에 데이터를 전달하기 위한 메커니즘.
• HTML 요소의 속성처럼 사용자 정의 속성을 추가 가능.

<CoreConcept
  title="Components"
  description="The core UI building blocks"
  image={componentsImg}
/>

• props는 리액트가 자동으로 컴포넌트 함수에 객체 형태로 전달

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

더 다양한 Prop(속성) 문법

1. data.js 모듈 도입

• CORE_CONCEPTS는 4개의 개념을 담은 배열이며, 각 요소는 다음 정보를 포함:
  • image: 이미지 경로
  • title: 제목
  • description: 설명

import componentsImg from "./assets/components.png";
import propsImg from "./assets/config.png";
import jsxImg from "./assets/jsx-ui.png";
import stateImg from "./assets/state-mgmt.png";

// CORE_CONCEPTS 변수는 export를 사용하면 다른 컴포넌트에서 import해서 사용할수 있음
export const CORE_CONCEPTS = [
  {
    image: componentsImg,
    title: "Components",
    description:
      "The core UI building block - compose the user interface by combining multiple components.",
  },
  {
    image: jsxImg,
    title: "JSX",
    description:
      "Return (potentially dynamic) HTML(ish) code to define the actual markup that will be rendered.",
  },
  {
    image: propsImg,
    title: "Props",
    description:
      "Make components configurable (and therefore reusable) by passing input data to them.",
  },
  {
    image: stateImg,
    title: "State",
    description:
      "React-managed data which, when changed, causes the component to re-render & the UI to update.",
  },
];

2. 컴포넌트에 props로 데이터 전달

• CoreConcept 컴포넌트를 하나 만들고, 여러 번 사용하면서 각기 다른 데이터를 props로 전달

import { CORE_CONCEPTS } from './data.js';

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

<CoreConcept 
  title={CORE_CONCEPTS[0].title} 
  description={CORE_CONCEPTS[0].description} 
  image={CORE_CONCEPTS[0].image} 
/>

3. 코드 최적화 방법: 스프레드 연산자 사용

• props와 객체 키가 동일할 경우, 스프레드 문법으로 간결하게 작성 가능

<CoreConcept {...CORE_CONCEPTS[0]} />

4. 컴포넌트 내부 최적화: 구조 분해 할당

• props.title 방식 대신, 구조 분해 할당으로 props를 간단히 분리할 수 있음

function CoreConcept({ title, description, image }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

• 하나의 CoreConcept 컴포넌트를 만들고, 4가지 데이터를 넣어 반복적으로 재사용
• JSX 구조와 코드의 가독성과 유지보수성 향상
• 불필요한 반복 제거, 코드 간결화 달성

📑 Reference

---

• 【한글자막】 React 완벽 가이드 2025 with React Router & Redux | Udemy
• 이미지 출저 Freepik | 올인원 AI 크리에이티브 툴

---