⚛️ React 기본 개념 정리

---

🖱️ JSX 이벤트 사용법

구분	잘못된 방식 ❌	올바른 방식 ✅	설명
클릭 이벤트	onclick	onClick	JSX에서는 카멜 표기법으로 작성해야 함

💡 예시

<button onClick={handleClick}>버튼</button>

---

🪝 useState (상태 관리 Hook)

React에서 컴포넌트의 상태(값) 를 관리하고, 이 값이 바뀌면 컴포넌트를 재렌더링하기 위해 사용하는 Hook입니다.

구분	설명
기본 문법	const [변수명, set변수명] = useState(초기값);
set함수 역할	상태 값을 변경하고, 해당 컴포넌트를 재렌더링함
값 변경 조건	주소값이 변경되어야 새로 렌더링 발생
함수 매개변수	onChange, onClick 등의 이벤트 함수는 실행 결과 정보를 매개변수로 전달함

---

🧩 useState 필요성

• React의 함수형 컴포넌트는 한 번 렌더링 시 한 번의 return만 수행.
• 따라서 한 번 화면에 그려진 JSX(HTML)는 수정 불가능.
• 변경을 반영하려면 함수를 재실행해야 하며, 이를 위해 useState 사용.

---

⚙️ 주소값 변경과 스프레드 연산자

React는 객체 또는 배열의 주소값이 달라질 때만 새로운 렌더링을 수행합니다.

💡 같은 주소값은 변경으로 인식되지 않음 → 렌더링되지 않음.

항목	설명	예시
스프레드 연산자 (...)	기존 배열이나 객체를 복사하여 새로운 주소값을 생성	const newArray = [...oldArray];

---

📘 예시 코드

import React, { useState } from 'react';

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

  const increase = () => {
    setCount(count + 1); // 상태 변경 → 컴포넌트 재렌더링
  };

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

export default Counter;