🚀 React를 처음 접할 때 헷갈리기 쉬운 JSX & 상태 관리 핵심 정리

React는 사용자와 웹 사이트가 상호작용할 수 있도록 도와주는 컴포넌트 기반 UI 라이브러리입니다.
하지만 처음 JSX 문법과 상태 관리를 접하면 HTML이나 일반 JS와 다르게 동작하는 부분이 있어 자주 헷갈리곤 하죠.

이번 글에서는 React를 처음 배울 때 꼭 짚고 넘어가야 할 문법 요소와 상태 관리 개념을 정리해보겠습니다.

---

✅ JSX 문법에서 주의할 점들

1. class가 아니라 className을 사용해야 합니다.

<div className="box">Hello</div>  // ✅

HTML에서는 class지만, JSX는 JavaScript 문법 기반이라 예약어인 class 대신 className을 사용합니다.

---

2. 변수는 {}로 감싸서 사용합니다.

const name = "React";
<h1>{name}</h1> // ✅

JSX 안에서 JavaScript 표현식을 사용하려면 중괄호 {}로 감싸야 합니다.

---

3. 인라인 스타일은 객체 형태로 넣습니다.

<div style={{ color: 'red', fontSize: '16px' }}></div> // ✅

CSS 속성명을 camelCase로 바꾸고, 전체를 객체로 작성해야 합니다.

---

4. return() 안에는 하나의 최상위 부모 요소만 있어야 합니다.

return (
  <>
    <Header />
    <Main />
  </>
) // ✅ Fragment 사용

JSX는 하나의 태그로 감싸야 합니다. 여러 요소를 병렬로 쓰려면 <></> (Fragment)를 활용하세요.

---

⚙️ 상태 관리 (useState)에서 자주 하는 실수

5. useState는 상태와 상태 업데이트 함수를 반환합니다.

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

상태가 변경되면 컴포넌트가 다시 렌더링됩니다.

---

6. onClick에는 무조건 함수를 전달해야 합니다.

<button onClick={() => setCount(count + 1)}>Click</button> // ✅

괄호를 바로 쓰면 함수가 즉시 실행되므로, 화살표 함수나 함수 이름만 전달해야 합니다.

---

7. like++ 처럼 후위 연산자를 사용하면 상태 업데이트가 의도대로 되지 않을 수 있습니다.

<span onClick={() => setLike(like + 1)}>👍</span> // ✅

like++는 기존 값을 반환한 뒤 증가시키므로, React의 비동기적 상태 처리와 어긋날 수 있습니다.

❗ like++는 현재 값을 먼저 전달하고 나중에 증가시키기 때문에, 의도한 증가 효과가 적용되지 않을 수 있습니다.
해결 방법: setLike(prev => prev + 1) 또는 setLike(like + 1) 사용

---

🔄 상태는 불변성(immutability)을 지켜야 합니다

8. setState에 새로운 참조값을 넘겨야 React가 변경을 감지합니다.

const newArr = [...oldArr];   // 배열 복사
setData(newArr);              // ✅ React가 감지함

• React는 상태가 바뀌었는지 참조값(주소) 만 비교합니다.
• 기존 배열이나 객체를 직접 수정하면 참조값이 바뀌지 않아서 React는 "변화가 없네?"라고 판단합니다.

---

📌 React vs Vue의 상태 관리 방식 비교

항목	React	Vue
상태 변경 원칙	불변성 (immutability)	반응성 시스템 (reactivity)
상태 변경 방식	복사 후 새로운 값으로 대체	원본 객체/배열 직접 수정 가능
변경 감지	참조값 비교 (얕은 비교)	Proxy 기반 추적
코드 유연성	번거롭지만 명확	직관적이지만 내부 추적 로직 복잡

---

🧾 마무리 요약

항목	핵심 내용
JSX class	className 사용
JSX 변수 바인딩	{}로 감싸야 함
style 적용	객체 형태로 작성
return 문	하나의 최상위 태그만 허용
useState	상태 변경시 새로운 값 필요
상태 변경	직접 수정 ❌, 복사 후 set함수 사용 ✅
후위 연산	++ 보다는 like + 1 사용 권장

---

✍️ 참고 링크

• CRA 공식 사이트: https://create-react-app.dev/