리액트의 특징

핵심 5가지

• 가상 DOM : 실제 DOM 조작 최소화 (성능 향상)
• 컴포넌트 기반 : 재사용 가능한 UI 조각
• 단방향 데이터 흐름 : Props → State 명확한 관리
• JSX : HTML + JavaScript 결합 문법
• 풍부한 생태계 : Next.js, Redux 등 강력한 서포트

2. 리액트 18 vs 19 차이점

React 18 주요 변경점

1. Concurrent Mode : 우선순위 기반 렌더링
2. Automatic Batching : 상태 업데이트 일괄 처리
3. 새로운 Hook : useId, useSyncExternalStore 추가
4. Suspense 개선 : 서버 사이드 렌더링 최적화

React 19 예상 변경점

// 예시 코드 (실제 구현과 다를 수 있음)
function App() {
  const [data] = useServerData(); // 서버 컴포넌트
  return <div>{data}</div>;
}

1. React Compiler : 자동 메모이제이션
2. 서버 컴포넌트 정식 지원
3. use 클래스 Hook 폐기 예고
4. 웹 어셈블리 통합 강화

3. JSX 기본 규칙

4가지 룰

1. 컴포넌트는 대문자
   function MyComponent() {} (O)
   function mycomponent() {} (X)

2. 단일 루트 요소
   jsx // Fragments 사용 추천 return ( <> <h1>Title</h1> <p>Content</p> );

3. JS 표현식은 {} 사용

<div>{user.name}</div>
<button disabled={!isValid}>Click</button>

1. className 사용
   <div className="container"> (O)
   <div class="container"> (X)

4. 렌더링의 정의와 차이점

렌더링 정의

컴포넌트 트리를 DOM 노드로 변환하는 과정

초기 vs 리렌더링 비교

Hook과 useState

1. Hook 개념/규칙/종류

1) 개념

클래스 없이 상태 관리 가능한 함수형 컴포넌트 기능

2) 규칙

• 최상위에서 호출 (조건문/루프 내 X)
• React 함수 내에서만 사용

3) 주요 Hook 종류

2. useState 심층 분석

기본 문법

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

심화 사용법

1. 함수형 업데이트
   jsx setCount(prev => prev + 1); // 이전 값 기반 업데이트

2. 지연 초기화
   jsx const [data] = useState(() => expensiveCalculation()); // 초기 1회 실행

3. 객체 상태 관리

const [user, setUser] = useState({ name: '', age: 0 });
setUser(prev => ({ ...prev, age: 25 })); // 불변성 유지

3. 컴포넌트 작성 2가지 방식

1) 화살표 함수 (권장)

const MyComponent = () => {
  return <div>Hello World</div>;
};

2) 일반 함수

function MyComponent() {
  return <div>Hello World</div>;
}

Hook 심화 팁

1. 커스텀 Hook 생성
   jsx function useToggle(initial = false) { const [state, setState] = useState(initial); const toggle = () => setState(!state); return [state, toggle]; }

2. Hook 규칙의 이유

3. 호출 순서 보장 필요

4. 컴포넌트당 Hook 목록 유지

5. 의존성 배열의 중요성
   jsx useEffect(() => { // effect 코드 }, [dependency]); // 배열 값 변경시 재실행