[ReactJS] state 이해하기, 언제 사용해야할까?

state 개념 정리

리액트의 state는 컴포넌트의 동적인 데이터를 관리하는 객체로, 시간에 따라 변할 수 있는 상태를 나타낸다. state가 변경되면 리액트는 자동으로 해당 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지하므로, 사용자 입력, API 응답, 타이머 등 변화하는 데이터를 효율적으로 관리할 수 있다.

 

리액트의 변수에는 일반변수와 state 변수가 있는데 변수 값을 직접 변경하는 일반 변수와는 달리 state 변수는 setState 또는 useState를 사용해 변경할 수 있다.

일반 변수는 값을 변경해도 UI가 자동으로 업데이트 되지 않지만 state 변수는 값을 변경하게 되면 리액트가 자동으로 UI를 다시 랜더링한다. 이는 리액트가 직접 state 변수 상태를 관리하기 때문이다. 그래서 일반 변수는 리액트의 렌더링 흐름과 독립적이며, UI 업데이트와 관련이 없는 데이터를 처리할 때 사용된다. state 변수는 리액트의 렌더링 시스템과 연결되어 있어, 상태 변경이 UI에 반영되어야 하는 경우에 반드시 사용해야 한다.

 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

// 일반 변수 (랜더링 안됨)
let post = "강남 역전 맛집"

// state로 선언하는 변수(랜더링 됨)
let [title, setTitle] = useState(['강남 우동 맛집', '남자코트 추천'])

 

 

---

 

state 변수를 선언하는 방법

state 변수는 Hook인 useState 사용하여 선언한다.

useState는 컴포넌트 함수의 최상위에서만 호출해야 한다. 조건문이나 반복문 안에서 호출하면 안된다. 또한, 상태는 항상 불변성을 유지해야 한다. 즉, 기존 값을 직접 변경하지 않고 새로운 값으로 설정해야 한다.

const [state, setState] = useState(initialValue);

 

• state: 현재 상태 값을 저장하는 변수
• setState: 상태 값을 업데이트하기 위한 함수
• initialValue: 상태의 초기값

 

숫자를 초기값으로 설정

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

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

 

 

문자를 초기값으로 설정

const [name, setName] = useState("React");

<input 
  type="text" 
  value={name} 
  onChange={(e) => setName(e.target.value)} 
/>

 

 

객체를 초기값으로 설정

const [user, setUser] = useState({ name: "John", age: 25 });

<button onClick={() => setUser({ ...user, age: user.age + 1 })}>
  Increase Age
</button>

 

 

배열을 초기값으로 설정

const [items, setItems] = useState([]);

<button onClick={() => setItems([...items, newItem])}>
  Add Item
</button>

 

 

---

 

 

언제 useState를 사용해야 할까?

만약 어떤 데이터가 useState로 선언해야 할지 헷갈린다면, 해당 데이터가 변경될 때 화면에 영향을 미치는지를 기준으로 판단하면 된다!

 

 

 

컴포넌트가 다시 렌더링되어야 할 때

리액트는 useState를 통해 상태가 업데이트되면 해당 상태를 사용하는 컴포넌트를 다시 렌더링한다.

// 화면에 표시되는 값이 변경될 때
const [count, setCount] = useState(0);

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

사용자와의 상호작용 결과를 관리할 때

버튼 클릭, 폼 입력, 체크박스 등 사용자의 입력이나 상호작용을 처리할 때 useState를 사용한다.

// 입력 필드에서 값을 업데이트할 때
const [text, setText] = useState("");

return (
  <input value={text} onChange={(e) => setText(e.target.value)} />
);

 

 

상태가 컴포넌트의 수명 주기 동안 유지되어야 할 때

컴포넌트가 마운트에서 언마운트될 때까지 데이터를 유지하려면 useState를 사용한다.

 

---

 

일반 변수는 언제 사용할까?

렌더링과 무관한 데이터를 사용할 때

화면에 영향을 주지 않는 데이터는 useState로 관리할 필요가 없다. 이런 경우는 일반 경우로 선언한다.

// 타이머의 내부 값, 비동기 요청의 참조 값
let timerId;

const startTimer = () => {
  timerId = setInterval(() => {
    console.log("Timer running...");
  }, 1000);
};

const stopTimer = () => {
  clearInterval(timerId);
};

 

 

 

임시 데이터를 사용할 때

컴포넌트 내부에서만 사용하는 임시 데이터는 일반 변수로 선언할 수 있다.

// 계산 결과를 일시적으로 저장
const a = 5;
const b = 10;
const sum = a + b; // 상태 관리 필요 없음

 

 

 

렌더링에 영향을 주지 않는 비동기 작업

비동기 작업의 진행 상태를 관리할 때, 렌더링에 영향을 주지 않는 데이터는 일반 변수로 관리해도 된다.

let isFetching = false;

const fetchData = async () => {
  isFetching = true;
  const data = await fetch("https://api.example.com/data");
  console.log(await data.json());
  isFetching = false;
};