<React> useState 등

📘 [React Orientation]

1. 리액트의 특징

• 컴포넌트 기반 : UI를 독립적이고 재사용 가능한 컴포넌트로 구성
• 선언형 UI : 데이터 상태에 따라 UI를 선언적으로 기술
• Virtual DOM 사용 : 실제 DOM 변경 최소화를 통해 성능 최적화
• Unidirectional Data Flow (단방향 데이터 흐름) : 데이터는 부모 → 자식 방향으로만 흐름
• JSX 사용 : JavaScript + XML 문법으로 HTML과 유사한 코드 작성 가능

2. React 18, 19에서 달라진 점 정리

버전	주요 변경 사항
React 18	- 자동 배치 (Auto Batching) - startTransition API 도입 - useId 훅 추가 - 새로운 Root API (createRoot) - SSR 개선 (Streaming SSR)
React 19	- use 훅 도입 : 서버 컴포넌트에서도 Promise 값을 기다릴 수 있음 - 에러 처리를 위한 useFormStatus, useOptimistic 추가 - 버튼, 폼 등에서 이벤트 핸들링 최적화 - React Compiler (미리보기) : 컴파일 타임 최적화 기능 도입 예정

 

3. JSX의 기본 규칙과 예제

👏 기본 규칙

• 반드시 하나의 부모 요소로 감싸야 함
• JavaScript 표현식은 {} 사용
• class 대신 className
• for 대신 htmlFor
• 닫는 태그 필수 (<input />, <br /> 등)
• 주석은 {/* 주석 */} 형식

function Example() {
	return (
		<div className="container">
			<h1> JSX의 기본 규칙 </h1>
			{/* 여기는 주석*/}
		</div>
	);
}

4. 리액트에서 렌더링의 정의 및 초기 렌더링 vs 리렌더링

👏 렌더링의 정의

• 컴포넌트가 React 요소 (HTML 구조)를 브라우저의 DOM에 출력하는 과정

👏 초기 렌더링

• 컴포넌트가 처음 마운트 될 때 DOM에 그려지는것

👏 리렌더링

• 상태(state)나 props가 변경되어 컴포넌트가 다시 DOM을 갱신하는 것
• 변경된 부분만 Virtual DOM을 통해 효율적으로 업데이트됨

---

🧩 [Hook과 useState]

1. Hook의 개념과 규칙, 종류

1. 개념
2. 함수형 컴포넌트에서 상태 관리나 생명주기 기능을 사용할 수 있게 해주는 함수
3. 규칙
   • Hook(훅)은 컴포넌트 최상단에서만 호출
   • 조건문, 반복문, 중첩 함수 안에서 호출 금지
   • use 로 시작하는 이름을 사용
4. 종류
   • useState : 상태값을 관리
   • useEffect : 컴포넌트 생명주기 처리
   • useContext : 전역 상태 관리
   • useRef : DOM 참조 또는 변수 저장
   • useMemo, useCallback : 성능 최적화
   • useReducer : 복잡한 상태 로직 관리
   • useLayoutEffect, useImperativeHandle 등 기타 고급 훅

2. useState 사용 문법과 사용 예제

👏 문법

const [state, setState] = useState(initialValue);

 

👏 예제

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

3. 함수를 이용하여 컴포넌트 작성하는 2가지 문법

1. 함수 선언식 (Function Declaration)

function Declaration() { return <h1>Welcome!</h1>; }

 

2. 함수 표현식 (Arrow Function)

const Arrow = () => { return <h1>Welcome!</h1>; };