TIL - 20250825

0825 React 기초: JSX, Component, Props, State

---

✅ 1. JSX와 컴포넌트: React의 기본 구성 요소

• React 애플리케이션은 컴포넌트(Component)라는 독립적이고 재사용 가능한 UI 조각들로 만들어집니다. 그리고 이 컴포넌트의 UI 구조는 JSX라는 특별한 문법을 사용해 정의합니다.

➕ JSX (JavaScript XML) 기초

• 개념: JavaScript를 확장한 문법으로, HTML과 매우 유사하게 생겼지만 실제로는 JavaScript입니다. Babel과 같은 트랜스파일러를 통해 React.createElement() 형태의 JavaScript 코드로 변환됩니다.
• 주요 규칙:
  1. 하나의 루트 요소: 모든 JSX 코드는 반드시 하나의 최상위 태그로 감싸여야 합니다.
  2. className 사용: HTML의 class 속성 대신 className을 사용합니다. (class는 JavaScript의 예약어)
  3. JavaScript 표현식: 중괄호 {}를 사용하면 JSX 내부에 JavaScript 변수나 표현식을 넣을 수 있습니다.
  4. 카멜 케이스: onclick 대신 onClick과 같이 이벤트 핸들러나 속성은 카멜 케이스(camelCase)로 작성합니다.

➕ 컴포넌트 (Component) 기초

• 개념: UI를 구성하는 독립적인 블록. JavaScript 함수나 클래스로 작성하며, 화면에 표시될 React 엘리먼트(JSX)를 반환합니다.
• 특징:
  • 재사용성: 하나의 컴포넌트를 여러 곳에서 재사용할 수 있습니다.
  • 캡슐화: 컴포넌트는 자신만의 로직과 상태를 가질 수 있어 독립적으로 동작합니다.
  • 합성: 작은 컴포넌트들을 조합하여 더 크고 복잡한 컴포넌트를 만들 수 있습니다.

// ExpenseItem.js - 지출 항목을 표시하는 간단한 함수형 컴포넌트
function ExpenseItem() {
  const expenseDate = new Date(2023, 2, 28);
  const expenseTitle = 'Car Insurance';
  const expenseAmount = 294.67;

  return (
    <div className="expense-item">
      <div>{expenseDate.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{expenseTitle}</h2>
        <div className="expense-item__price">${expenseAmount}</div>
      </div>
    </div>
  );
}

---

✅ 2. Props: 컴포넌트에 데이터 전달하기

• Props (Properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 읽기 전용(Read-Only) 데이터입니다. 이를 통해 컴포넌트를 동적으로 재사용할 수 있습니다.

Props 전달 방식	설명	예시 (부모 컴포넌트)
기본 전달	자식 컴포넌트에 HTML 속성처럼 데이터를 전달	<ExpenseItem title="New TV" amount={450} />
객체 전달	여러 데이터를 하나의 객체로 묶어 전달	<ExpenseItem item={expenseData} />
배열 전달	여러 컴포넌트를 렌더링하기 위해 배열을 전달	<ExpenseList items={expenses} />
props.children	컴포넌트의 여는 태그와 닫는 태그 사이에 내용을 전달	<Card><h2>Expense Item</h2></Card>

// 부모 컴포넌트 (App.js)
function App() {
  const expense = {
    date: new Date(2023, 2, 28),
    title: 'Car Insurance',
    amount: 294.67
  };

  // 자식 컴포넌트(ExpenseItem)에 props로 데이터 전달
  return <ExpenseItem title={expense.title} amount={expense.amount} date={expense.date} />;
}

// 자식 컴포넌트 (ExpenseItem.js)
// props 객체를 통해 데이터를 받음
function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

---

✅ 3. State와 이벤트: 동적인 컴포넌트 만들기

• State(상태)는 컴포넌트 내부에서 관리되는, 변할 수 있는 데이터입니다. State가 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링하여 화면을 업데이트합니다.

➕ 이벤트 바인딩

• 사용자의 행동(클릭, 입력 등)에 반응하기 위해 JSX 엘리먼트에 이벤트 핸들러 함수를 연결하는 것을 의미합니다.

  function MyComponent() {
    const clickHandler = () => {
      console.log('Button clicked!');
    };
    // onClick 속성에 함수를 직접 연결
    return <button onClick={clickHandler}>Click Me</button>;
  }

➕ useState 기초

• useState는 함수형 컴포넌트에서 State를 사용할 수 있게 해주는 React Hook입니다.
• 사용법: const [state, setState] = useState(initialValue);
  • state: 현재 상태 값.
  • setState: 상태를 갱신하는 함수. 이 함수를 통해서만 상태를 변경해야 합니다.
  • initialValue: 상태의 초기값.

// 카운터 예제
import React, { useState } from 'react';

function Counter() {
  // count 상태를 0으로 초기화
  const [count, setCount] = useState(0);

  const incrementHandler = () => {
    // setCount 함수를 호출하여 count 상태를 갱신
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementHandler}>Increment</button>
    </div>
  );
}

➕ 입력값 상태 관리 (Controlled Components)

• 폼(Form)의 입력 요소(input, textarea 등)의 값을 컴포넌트의 State와 연결하여 관리하는 방식입니다.
• 단일 상태 관리: 여러 입력 필드를 하나의 State 객체로 관리하면 코드를 더 간결하게 만들 수 있습니다.

function ExpenseForm() {
  // 여러 입력값을 하나의 객체로 관리
  const [userInput, setUserInput] = useState({
    enteredTitle: '',
    enteredAmount: '',
    enteredDate: ''
  });

  const titleChangeHandler = (event) => {
    // 이전 상태를 복사하고, 변경된 값만 덮어쓰기
    setUserInput(prevState => {
      return { ...prevState, enteredTitle: event.target.value };
    });
  };

  return (
    <form>
      <input type="text" value={userInput.enteredTitle} onChange={titleChangeHandler} />
      {/* ... 다른 입력 필드들 ... */}
    </form>
  );
}```

---

### 📌 요약

*   **JSX**는 JavaScript 내에서 UI 구조를 HTML처럼 쉽게 작성할 수 있게 해주는 문법입니다.
*   **컴포넌트**는 UI를 구성하는 재사용 가능한 독립적인 블록입니다.
*   **Props**는 부모에서 자식으로 데이터를 전달하는 **읽기 전용** 통로입니다.
*   **State (`useState`)**는 컴포넌트의 **내부 데이터를 관리**하며, 이 값이 변하면 화면이 자동으로 다시 렌더링됩니다.
*   **이벤트**를 통해 사용자 입력을 받아 **State를 변경**함으로써 동적이고 인터랙티브한 UI를 만들 수 있습니다.