React - 기초

1. React 컴포넌트(Component)

• 함수형 컴포넌트 vs 클래스형 컴포넌트
  • 함수형: function MyComp() { … } 또는 const MyComp = () => { … }
  • 클래스형: class MyComp extends React.Component { render() { … } } (현재는 거의 사용하지 않음)
• 컴포넌트는 재사용 가능한 UI 조각
• 부모–자식 관계로 컴포넌트를 조립하여 최종 UI를 구성

---

2. JSX 문법 심화

• 한 번에 하나의 최상위 태그로 감싸기 (<div> 또는 <></>)
• JavaScript 표현식은 {} 안에 작성
• 일부 속성 이름 변경:
  • class → className
  • for → htmlFor
• Self-Closing 태그: <input />, <img /> 등 반드시 닫기
• 조건부 렌더링:
  • 삼항 연산자: {cond ? <A /> : <B />}
  • && 연산자: {cond && <A />}
• 리스트 렌더링:

    {items.map(item => <li key={item.id}>{item.name}</li>)}

---

3. Props

• 부모 → 자식으로 데이터(속성) 전달

• 컴포넌트 함수의 매개변수(props)로 받음

• 구조 분해 할당으로 간결화:

  function Profile({ name, age }) { … }

• 전개 연산자를 이용해 객체를 한 번에 넘길 수도 있음:

  <Profile {...person} />

• defaultProps 로 기본값 설정

---

4. State

✅ State란?

• 컴포넌트 내부에서 관리되는 동적인 데이터
  == 컴포넌트 내부에서 관리하는 “변할 수 있는 값”
• 시간이 지남에 따라 바뀔 수 있는 값 (ex. 버튼 클릭 수, 입력 값, 토글 상태 등)
• 컴포넌트가 리렌더링되는 이유가 되는 핵심 데이터

---

🛠️ 사용법: useState 훅

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• useState(초기값) 호출 시 → [값, 설정함수] 배열 반환

• setCount(newValue) 를 호출하면:

  1. React가 내부 state 값을 변경
  2. 변경된 값을 기반으로 컴포넌트를 자동 리렌더링

---

🧠 state의 메모리 구조

• useState는 React 내부의 Hooks 메모리 저장소에 상태값을 저장
• 이 저장소는 브라우저의 메모리(RAM) 위에 위치하며, 가상 DOM과 함께 관리됨
• setState를 사용하지 않고 변수만 바꾸면 리렌더링되지 않음
  → React는 setState 호출을 기준으로 변경을 감지

---

🔁 재렌더링 vs 초기화

• 컴포넌트가 리렌더링될 때도 useState의 값은 유지됨
• useState(초기값)의 초기값은 처음 마운트 시 딱 한 번만 사용됨
• 상태는 브라우저가 꺼지거나 새로고침되기 전까지 유지됨

---

⚠️ 상태 변경은 비동기일 수 있음

setCount(count + 1);
setCount(count + 1);

이렇게 두 번 호출해도 값이 1씩 증가하지 않음.

👉 해결법:

setCount(prev => prev + 1);
setCount(prev => prev + 1); // 이러면 2 증가

---

📌 주의할 점 정리

항목	설명
직접 값 변경 금지	count = count + 1 은 동작 안 함
set함수 사용 필수	항상 setState로 변경해야 반영됨
비동기 처리됨	즉시 반영되지 않고, React 스케줄링 후 반영
초기값은 한 번만	useState(초기값)의 초기값은 컴포넌트가 처음 실행될 때만 적용

---

💡 상태가 필요한 경우 예시

• 버튼 클릭 수
• 입력 폼 제어값
• 모달 열림/닫힘 상태
• 탭 선택 상태
• API 데이터 로딩 상태

---

5. State 저장 및 렌더링 흐름

1. 마운트 시 useState(initial)의 initial은 한 번만 사용
2. 이후 렌더링에서는 React가 내부 메모리에 저장한 값을 꺼내 사용
3. 상태 변경 → React가 가상 DOM(diff) 비교 → 변경된 부분만 실제 DOM에 반영
4. 상태는 브라우저 새로고침 전까지 유지됨

---

6. 브라우저 · React · 메모리 관계

• 노트북 물리적 RAM: OS와 모든 앱이 공유
• 브라우저 RAM: 브라우저 프로세스(탭)별로 JS 실행, DOM/CSS/가상 DOM, React state 저장
• React state는 브라우저 프로세스의 메모리(물리적 RAM 할당 영역)에 저장
• 브라우저가 React 컴포넌트를 실행·관리하며, 화면은 실제 DOM을 통해 렌더링

---

7. 주요 키워드

• 함수형 컴포넌트, 클래스형 컴포넌트
• JSX, Fragment, 표현식 {}, self-closing
• Props, 구조분해, 전개 연산자, defaultProps
• State, useState, setState, 리렌더링
• 가상 DOM(diff), 실제 DOM 업데이트
• 브라우저 RAM vs 물리적 RAM

---