TIL - 20260320

0320 리액트 기초 복습 (1/N): 왜 React인가? 핵심 개념

---

✅ 1. 왜 React를 사용하는가?

• 전통적인 웹 개발(Vanilla JavaScript, jQuery)에서는 데이터가 변경될 때마다, 개발자가 직접 어떤 DOM 요소를 찾아 어떻게 변경할지를 코드로 작성해야 했습니다. 이는 UI가 복잡해질수록 코드를 관리하기 매우 어렵게 만듭니다.

• React는 이러한 문제를 해결하기 위해 등장한 UI 라이브러리입니다.

  • 선언형(Declarative) UI: 개발자는 "데이터(State)가 이런 상태일 때, UI는 이런 모습이어야 한다"라고 선언하기만 하면, React가 알아서 효율적으로 화면을 변경해줍니다.
  • 컴포넌트 기반(Component-Based): UI를 재사용 가능한 독립적인 조각(컴포넌트)들로 나누어 관리합니다. 레고 블록을 조립하듯 UI를 구축할 수 있어, 코드의 재사용성과 유지보수성이 크게 향상됩니다.
  • Virtual DOM: 실제 DOM을 직접 조작하는 대신, 메모리상에 가상의 DOM(Virtual DOM)을 먼저 그리고 이전 가상 DOM과 비교합니다. 그 후, 변경된 부분만 실제 DOM에 최소한으로 적용하여 뛰어난 성능을 보장합니다.

---

✅ 2. JSX (JavaScript XML): UI를 JavaScript로 표현하는 문법

• JSX는 JavaScript를 확장한 문법으로, JavaScript 파일 내에서 HTML과 매우 유사한 형태로 UI 구조를 작성할 수 있게 해줍니다.

• 주요 규칙:

  1. 하나의 루트 요소: 모든 JSX 코드는 반드시 하나의 최상위 태그로 감싸여야 합니다. (보통 <div>나 <>(Fragment)를 사용)
  2. className 사용: HTML의 class 속성 대신 className을 사용합니다. (class는 JavaScript의 예약어)
  3. JavaScript 표현식 삽입: 중괄호 {}를 사용하면 JSX 내부에 JavaScript 변수나 표현식을 넣을 수 있습니다.
  4. 카멜 케이스(camelCase): onclick 대신 onClick, background-color 대신 style={{ backgroundColor: 'red' }}와 같이 이벤트 핸들러나 스타일 속성은 카멜 케이스로 작성합니다.

  function App() {
    const name = "React";
    const style = { color: 'blue', fontSize: '20px' };
  
    return (
      <div className="container">
        {/* JavaScript 변수 사용 */}
        <h1>Hello, {name}!</h1>
        {/* JavaScript 객체로 스타일 적용 */}
        <p style={style}>This is a JSX example.</p>
      </div>
    );
  }

---

✅ 3. 컴포넌트 (Component): 재사용 가능한 UI 조각

• 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 최소 단위입니다. 현대 React에서는 주로 함수형 컴포넌트를 사용합니다.

• 함수형 컴포넌트: JavaScript 함수이며, props라는 객체를 인자로 받아 화면에 렌더링될 React 엘리먼트(JSX)를 반환합니다.

• 특징:

  • 재사용성: 하나의 컴포넌트를 여러 곳에서 반복해서 사용할 수 있습니다.
  • 캡슐화: 컴포넌트는 자신만의 로직과 상태를 가질 수 있어 독립적으로 동작합니다.
  • 합성: 작은 컴포넌트들을 조합하여 더 크고 복잡한 컴포넌트나 페이지를 만들 수 있습니다.

  // Greeting.js - 재사용 가능한 컴포넌트
  function Greeting(props) {
    return <h2>Hello, {props.name}!</h2>;
  }
  
  // App.js - 컴포넌트 합성
  function App() {
    return (
      <div>
        <Greeting name="Alice" />
        <Greeting name="Bob" />
      </div>
    );
  }

---

✅ 4. Props (Properties): 부모에서 자식으로 데이터 전달

• Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 메커니즘입니다. React의 핵심적인 단방향 데이터 흐름(One-way Data Flow)을 구성합니다.

• 핵심 특징:

  • 읽기 전용 (Read-Only): 자식 컴포넌트는 전달받은 props를 절대 직접 수정해서는 안 됩니다. 이는 데이터 흐름을 예측 가능하게 만드는 중요한 원칙입니다.
  • 객체 형태: 자식 컴포넌트는 props를 하나의 객체로 전달받습니다.

  // ParentComponent.js
  function ParentComponent() {
    const userData = { name: "Charlie", age: 30, job: "Developer" };
    // 자식에게 user라는 이름으로 객체 전달
    return <ChildComponent user={userData} />;
  }
  
  // ChildComponent.js
  // props 객체에서 user를 구조 분해 할당하여 사용
  function ChildComponent({ user }) {
    return (
      <div>
        <p>Name: {user.name}</p>
        <p>Age: {user.age}</p>
        <p>Job: {user.job}</p>
      </div>
    );
  }

---

📌 요약

• React는 컴포넌트 단위로 UI를 조립하는 선언형 라이브러리로, 개발자는 "무엇을" 보여줄지만 정의하면 됩니다.
• UI 구조는 JSX라는 직관적인 문법으로 작성합니다.
• 데이터는 부모에서 자식으로 Props를 통해 단방향으로 흐르며, 자식은 props를 수정할 수 없습니다.
• 컴포넌트가 스스로 데이터를 기억하고 변경해야 할 때는 State를 사용하며, 이는 다음 학습의 주제입니다.