[React] State로 상태 관리하기

🔍 State란?

• 컴포넌트 내부에서 관리되는, 변할 수 있는 데이터
• 인터랙션에 따라 UI가 동적으로 변하게 해주는 핵심 개념

---

✅ 예시 코드

import { useState } from 'react';

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

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

• count: 현재 숫자 상태를 저장하는 state 변수
• setCount: count 상태를 변경하는 함수
• 버튼을 누르면 setCount(count + 1)이 실행되어 count 값이 1 증가하고,
  React는 자동으로 컴포넌트를 다시 렌더링해서 변경된 값을 화면에 보여줌

---

✅ 상태 변경 시, 전체 컴포넌트를 다시 그린다

• 상태가 바뀌면 React는 해당 컴포넌트를 전체 다시 렌더링
• 예를 들어, count라는 상태가 바뀌면 return() 안의 JSX 전체가 다시 실행

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

  return (
    <div>
      <p>{count}</p>  // 이 부분만 바뀌는 것 같지만...
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• 실제로는 성능에 큰 문제가 없음
• 가상 DOM(Virtual DOM)을 이용해서, 바꿔야 하는 부분만 DOM에 반영
• 렌더링은 전체 컴포넌트를 다시 실행하지만
  브라우저에 보여지는 부분은 최소한의 변화만 적용

---

🎯 핵심 개념 정리

개념	설명
useState(initialValue)	컴포넌트에 상태(state)를 추가하고, 초기값 설정
상태값(state)	const [value, setValue] 구조로 현재 값과 변경 함수 제공
상태 변경	setValue(newValue) 호출 시 컴포넌트가 다시 렌더링됨
배열 상태 업데이트	기존 배열을 복사하고 일부만 수정한 새 배열을 만들어 전달

---

💡 TIPS: 상태를 업데이트할 때 주의할 점

1. 불변성 유지
   상태를 직접 수정하지 말고 새로운 값을 만들어서 setState 해야 함

   // ❌ 잘못된 예
   links[0].text = "수정됨";
   setLinks(links); // 이건 React가 변경을 감지 못해요
   
   // ✅ 올바른 예
   const newLinks = [...links];
   newLinks[0] = { ...newLinks[0], text: "수정됨" };
   setLinks(newLinks);

2. 컴포넌트 분리해서 각자 상태 관리
   각 요소에 고유한 상태가 필요할 땐, 컴포넌트로 분리해서 관리하는 게 좋음