React에서 state는 언제 필요할까?

React를 처음 배우면서 가장 많이 사용하게 되는 것이 바로 state다.

그런데 사용하다보니 한 가지 의문이 들었다.

모든 값을 state로 관리해야 할까?

---

처음에 했던 생각

처음에는 이렇게 생각했다.

• 값이 있으면 일단 state로 만들자
• 바뀔 가능성이 있으면 state
  그러다 보니, 그냥 다 state 쓰면 되는 거 아닌가?

그래서 이런 코드가 자연스럽게 나왔다.

const [name, setName] = useState("Kim");
const [age, setAge] = useState(20);
const [title, setTitle] = useState("Hello");

이해보다는 받아들여서 쓰기 시작하다보니

“모든 값을 state로 관리해야 하는 것인가?”

하는 궁금증이 생겼다.

---

💡 state와 일반 변수의 차이

찾아보다보니 기준을 하나 잡을 수 있었다.

👉 “이 값이 바뀔 때 화면(UI)이 다시 그려져야 하는가?”

---

React의 렌더링이란?

이것에 대해 이해하기 위해 렌더링을 짚어보고 넘어가겠다.

React는 상태(state)가 변경되면 컴포넌트를 다시 실행하고 UI를 다시 그린다

state 변경 → 컴포넌트 함수 재실행 → UI 업데이트

즉, state는 단순한 값이 아니라 렌더링을 발생시키는 기준이다

---

✅ 그냥 변수로 충분한 경우

const title = "Hello";

👉 특징:

• 값이 바뀌지 않음
• UI에 영향 없음

---

✅ state가 필요한 경우

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

👉 특징:

• 값이 변경됨
• 변경되면 UI가 다시 렌더링되어야 함

---

📌 핵심 기준

👉 렌더링을 발생시키지 않는 값은 state가 아니다

---

⚠️ state를 남용하면 생기는 문제

1️⃣ 불필요한 리렌더링

state가 바뀌면 컴포넌트가 다시 렌더링된다.
👉 필요 없는 값까지 state로 만들면 성능에 영향을 줄 수 있다.

---

2️⃣ 코드 복잡도 증가

• state 많아짐
• 관리 어려움
• 읽기 힘든 코드

---

3️⃣ 의도 파악이 어려워짐

👉 어떤 값이 중요한 상태인지 헷갈림

---

🔥 다시 정리해보면

처음에는 이렇게 생각했다.

“state는 그냥 값 저장하는 도구다”

하지만 지금은 이렇게 이해하고 있다.

👉 state는 “UI를 바꾸기 위한 상태”다

---

🧠 정리

React는 단순히 값을 저장하는 방식이 아니라

👉 “상태 변화에 따라 UI를 다시 그리는 구조”였다

그래서 중요한 건

• 값을 저장하는 것보다
• 어떤 값을 state로 관리할지 판단하는 것

이었다.

모든 값이 state일 필요는 없다  
렌더링이 필요한 값만 state로 관리하자

---

실습 적용

이전에 TodoList를 구현해보면서 state가 언제 필요한지 더 명확하게 이해할 수 있었다.

• 할 일 추가

const [todos, setTodos] = useState([]);

function handleAddTodo(title) {
  const newTodo = {
    id: Date.now(),
    title,
    completed: false,
  };

  setTodos([...todos, newTodo]);
}

할 일을 추가하면 todos 상태가 변경되고 UI도 함께 업데이트된다.
이 경우 state가 반드시 필요하다

• 완료 처리

function handleToggleTodo(id) {
  const updated = todos.map((todo) =>
    todo.id === id
      ? { ...todo, completed: !todo.completed }
      : todo
  );

  setTodos(updated);
}

completed 값이 바뀌면서 UI에서 할일/완료 목록이 이동한다.
state 변화 → UI 변화가 연결되는 구조였다

👉 결국 중요한 것은 state를 사용하는 것이 아니라 언제 사용해야 하는지를 아는 것이었다