[리액트] State 실행흐름

import React, { useState } from "react";

// 이 전체가 컴포넌트
// React에서 컴포넌트는 JS 함수이면서, JSX를 반환하는 것.
// 컴포넌트 이름은 대문자로 시작하는 것이 React 규칙
export const StateComponent1 = () => {
  // state 정의
  const [message, setMessage] = useState("");
  const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setMessage(e.target.value);
  };

  return (
    <div>
      <input onChange={onChange} />
      <p>{message}</p>
    </div>
  );
};

// 컴포넌트: React 함수 또는 클래스
// props: 부모 -> 자식에게 전달하는 읽기 전용 데이터
// state: 컴포넌트 내부에서 관리되는 동적인 데이터

🧠 사용자가 텍스트를 입력할 때의 실행 순서
예: 사용자가 hello를 입력했다고 가정
🔁 매 입력마다 반복되는 흐름 (입력 하나하나마다 실행됨)
예: h를 입력
1. ✅ 사용자 입력: 에 h 입력

2. ✅ onChange 이벤트 발생

브라우저가 React에게 “값이 바뀌었어요”라고 알림

onChange={onChange}에 등록된 함수가 실행됨

3. ✅ onChange 함수 실행

setMessage(e.target.value); // e.target.value는 'h'

→ 상태 message를 'h'로 변경

4. ✅ React가 상태 변화 감지
   setMessage()는 상태를 바꿨으니, 컴포넌트를 리렌더링함

5. ✅ 컴포넌트 다시 실행

StateComponent1() 함수 전체가 다시 실행

useState()는 'h' 상태 유지

6. ✅ JSX 다시 반환

<input onChange={onChange} />
<p>{message}</p>  // message는 이제 'h'

7. ✅ 화면 다시 그림

h

가 브라우저에 보여짐

이 과정이 e, l, l, o 입력될 때마다 반복돼요.

📌 흐름 요약 그림

[사용자 입력]
     ↓
<input onChange={onChange}>
     ↓
onChange 함수 실행 → setMessage()
     ↓
React: 상태 변경 감지 → 컴포넌트 다시 실행
     ↓
JSX 반환 → 화면에 반영

🔍 return 다음에 오는 건 JSX이자, 결국 JavaScript 표현식

JSX는 "JavaScript XML"의 줄임말이에요.
즉, HTML처럼 생겼지만 실제로는 JavaScript 코드로 변환 가능한 문법이에요.

export const MyComponent = () => {
  // ✅ 여기는 일반 자바스크립트 로직
  const name = "주연";
  const isLoggedIn = true;

  // ✅ return 뒤는 JSX (JS 표현식 포함 가능)
  return (
    <div>
      <h1>Hello, {name}</h1>
      {isLoggedIn ? <p>환영합니다!</p> : <p>로그인 해주세요.</p>}
    </div>
  );
};

name, isLoggedIn 등은 JS 변수
JSX 안에서 {}로 JS 표현식을 삽입

JSX에서 중괄호 {}를 꼭 써야 하는 이유는

👉 JSX 내부에서 JavaScript 표현식(값, 변수, 함수 등)을 삽입할 때는 항상 중괄호로 감싸야 하기 때문이에요.