[React] 컴포넌트의 상태 관리: state와 useState

리액트에서 UI를 업데이트하는 방식은 일반 자바스크립트와는 완전히 다르다.

---

 

 

1. 일반 변수 vs React State (비교)

 

 

❌ 방식 1. 일반 변수와 수동 렌더링

데이터가 바뀌어도 화면은 바뀌지 않는다. 그래서 매번 수동으로 명령해야 한다.

let counter = 0;

function countUp() {
  counter = counter + 1;
  render(); // 직접 UI를 다시 그리라고 호출해야 함 (불편함)
}

function render() {
  root.render(<Container />);
}

 

 

✅ 방식 2: React useState 사용

데이터(State)를 바꾸기만 하면, 리액트가 알아서 변경된 부분을 감지하고 화면을 다시 그린다.

function App() {
  const [counter, setCounter] = React.useState(0);

  const onClick = () => {
    setCounter(counter + 1); // 상태를 바꾸면 리액트가 자동으로 리렌더링!
  };

  return (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={onClick}>Click Me</button>
    </div>
  );
}

 

 

 

---

2. 구성 (배열 구조 분해 할당)

 

const [counter, setCounter] = React.useState(0);

 

1. 첫 번째 인자 (counter) : 현재 상태 값
   • 지금 화면에 보여줄 데이터 그 자체.
   • 읽기 전용이며, 직접 수정(예: counter = 5)해도 리액트는 화면을 그려주지 않는다.
2. 두 번째 인자 (setCounter) : 상태 변경 함수 (Modifier)
   • 상태를 업데이트하고 리렌더링(Re-rendering)을 발생시키는 함수입니다.

 

 

 

---

3. 왜 State를 사용해야 할까? (장점)

1. 선언적 UI: "어떻게 화면을 바꿀지" 명령할 필요가 없다. 데이터(상태)만 바꾸면 UI는 자동으로 따라온다.
2. 효율적인 업데이트: 리액트는 전체 페이지를 새로고침하지 않는다. 바뀐 부분(Diffing)만 찾아내서 업데이트한다.
3. 코드 간결화: getElementById로 요소를 찾거나, 직접 DOM을 조작하고 이벤트 리스너를 복잡하게 관리할 필요가 없다.

 

 

 

---

4. State를 변경하는 두 가지 방법

setCounter를 사용할 때 값을 넣는 방식에는 큰 차이가 있다.

 

 

방법 A: 직접 값 설정

setCounter(counter + 1);

• 특징: 현재 스코프에 있는 counter 변수 값을 그대로 사용.
• 위험성: 아주 짧은 찰나에 여러 번의 업데이트가 일어나면, counter 값이 예상과 다를 수 있다. (비동기 처리 문제)

 

방법 B: 함수형 업데이트 ⭐⭐⭐⭐⭐

setCounter((current) => current + 1);

• 특징: 함수의 인자로 '확실한 현재의 최신 상태(current)'를 리액트가 보장해서 전달해준다.
• 장점: 이전 상태 값에 의존하여 다음 값을 계산할 때 가장 안전한 방법. 예상치 못한 버그를 방지할 수 있음.

 

 

---

💡 요약 

• State가 변하면? 컴포넌트는 재생성되고 리렌더링된다.
• State 함수(setCounter)의 역할: 값을 변경하고, 리액트에게 "화면 다시 그려!"라고 알리는 신호탄이다.
• 함수형 업데이트: (current) => current + 1 방식은 최신 데이터를 보장받고 싶을 때 필수로 사용하자.
• counter (첫 번째): 화면에 뿌려줄 '현재 값'
• setCounter (두 번째): 화면을 갈아 끼워주는 '동작 버튼'