React 구조와 컴포넌트 흐름

1️⃣ React의 DOM 업데이트 (Virtual DOM 개념)

💡 핵심 개념

• 브라우저는 실제 화면을 그릴 때 DOM(Document Object Model) 을 조작한다.

• 하지만 DOM 조작은 매우 느린 작업이기 때문에, React는 이를 최적화하기 위해 Virtual DOM을 사용한다.

🧩 Virtual DOM 동작 원리

• React는 화면에 렌더링할 컴포넌트 구조를 Virtual DOM(가상 DOM) 형태로 메모리에 저장한다.
• 상태(State)나 props가 바뀌면, React는 새로운 Virtual DOM을 생성하고 이전 Virtual DOM과 비교(diffing)한다.
• 바뀐 부분만 찾아서 실제 DOM에 최소한으로 업데이트한다.

🎯 장점

• 전체 DOM을 다시 그리지 않기 때문에 빠르고 효율적
• React는 필요한 부분만 다시 렌더링 -> 렌더링 속도 대폭 감소

---

2️⃣ 함수형 컴포넌트 기본 구조

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

JSX를 반환하는 함수, 컴포넌트 이름은 항상 대문자로 시작해야 한다.

• return안에는 하나의 부모 태그만 존재해야 한다.
• 여러 개의 엘리먼트를 반환하려면 <div> , <>...</>로 감싸야 한다.

✅ 예시

function App() {
  return (
    <>
      <h1>리액트 공부 시작!</h1>
      <p>함수형 컴포넌트 구조 이해하기</p>
    </>
  );
}

---

3️⃣ JSX 문법 규칙

1. Javascript 표현식은 {} 중괄호 안에 작성

const name = "홍길동";
return <h1>안녕하세요, {name}님!</h1>;

2. 조건부 렌더링

const isLogin = true;
return <>{isLogin ? <p>로그인 상태입니다</p> : <p>로그인이 필요합니다</p>}</>; // 조건식 활용
// isLogin = true 이면 -> 로그인 상태입니다.
// isLogin = false 이면 -> 로그인이 필요합니다.

3. 리스트 렌더링

const fruits = ["사과", "바나나", "포도"];
return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

---

4️⃣ 컴포넌트 간 데이터 흐름 (부모 → 자식 props 전달)

부모 컴포넌트 App에서 데이터를 입력해 자식 컴포넌트 Greeting 의 name값을 지정해줄 수 있다. (원하는 값으로 간단히 변경 가능)

부모 컴포넌트 (App)

function App() {
  return <Greeting name="지현" />;
}

자식 컴포넌트 (Greeting)

function Greeting({ name }) {
  return <h2>안녕하세요, {name}님!</h2>;
  // 결과 : 안녕하세요, 지현님!
}

💬 정리

• props는 읽기 전용 (부모 -> 자식으로만 전달 가능).
• 자식 컴포넌트는 props를 직접 수정 X

---

🔍 핵심 포인트

개념	설명
컴포넌트 구조화	화면을 작은 단위로 나누고 조립하듯이 구성
props	부모 → 자식 데이터 전달 수단 (읽기 전용)
map()을 이용한 리스트 렌더링	배열 데이터를 반복적으로 화면에 표시
key 속성	React가 리스트 항목을 식별할 수 있게 하는 고유값
Virtual DOM	변경된 부분만 업데이트하여 성능 최적화

---