[React] 리액트에서 Destructuring으로 state 선언하는 방법

리액트에서는 useState를 사용하여 state(상태)를 선언할 때,

구조 분해 할당(Destructuring Assignment)를 활용할 수 있다.

 

 

1. 기본적인 useState 선언 (Destructuring 사용)

리액트의 useState는 배열을 반환하는데, **첫번째 값은 state**이고, 두번째 값은 **상태를 변경하는 setter 함수**이다.

우리가 일반적으로 알고 있는 state 선언 방식 그 자체가 Destructuring을 사용한 거라 보면 된다.

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

count → 현재 상태 값 (초기값 0)

setCount → 상태를 변경하는 함수

 

 

2. 객체 형태의 상태 선언하기 (Destructuring 활용)

function Example() {
  const [user, setUser] = useState({ name: "Alice", age: 30 });

  // 객체에서 특정 값만 구조 분해 할당하기
  const { name, age } = user;

  return (
    <div>
      <p>이름: {name}</p>
      <p>나이: {age}</p>
      <button onClick={() => setUser({ ...user, age: age + 1 })}>나이 증가</button>
    </div>
  );
}

 

라는 코드가 있다.

 

const { name, age } = user;

user 객체에서 name, age를 추출하여 변수로 선언.

 

setUser({ ...user, age: age + 1 });

기존 user 값을 유지하면서 age 값만 변경.

 

 

 

3. 배열 형태의 상태 선언하기

function Example() {
  const [fruits, setFruits] = useState(["Apple", "Banana", "Cherry"]);

  return (
    <div>
      <p>첫 번째 과일: {fruits[0]}</p>
      <button onClick={() => setFruits([...fruits, "Grapes"])}>과일 추가</button>
    </div>
  );
}

라는 코드가 있다.

{fruits[0]} 으로 첫번째 요소를 구조 분해 할당할 수 있다.

 

const [firstFruit, secondFruit] = fruits;

이렇게 하면 firstFruit="Apple", secondFruit="Banana" 가 된다.

 

setFruits([...fruits, "Grapes"])

이렇게 하면 기존 furits 에 "Grapes" 를 덧붙인 ["Apple", "Banana", "cherry", "Grapes"]가 된다.

 

 

정리

1. useState 는 배열을 반환 → 구조 분해 할당으로 [state, setState] 형태로 받음

2. 객체 상태를 사용할 때 { key1, key2 } = state 형태로 분해해서 사용 가능

3. 배열 상태도 구조 분해 할당 가능 → [ firstItem, secondItem ] = arrayState 형태로 사용 가능 

 

 

관련 포스트

아래 게시글의 3번 Destructuring을 참고하자

https://dev-traveler.tistory.com/39

[JavaScript] 리액트에서 자주 쓰는 자바스크립트 문법