React useState Hook의 반환 값이 객체가 아닌 배열인 이유

1. 구문 간결성

객체를 사용하는 경우 객체의 속성을 개별적으로 추출 해야한다.

배열을 사용하는 경우에는 구조 분해 할당을 통해 간단하게 요소에 접근 할 수 있어 코드가 간결하고 가독성 있게 만들어준다.

const user = { name: 'John', age: 30, city: 'New York' };

// 객체 속성 구조 분해 할당
const { name, age, city } = user;

console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'

const numbers = [1, 2, 3, 4, 5];

// 배열 요소 구조 분해 할당
const [first, second, third] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(third); // 3

2. 인덱스 접근

배열은 인덱스를 사용하여 요소에 접근할 수 있다.

객체의 경우 key , value 를 사용하기에 추가적인 작업이 가능하다.

const user = { name: 'John', age: 30 };

// 속성 접근
console.log(user.name); // 'John'

// 변수를 사용하여 동적으로 속성 접근
const propertyName = 'age';
console.log(user[propertyName]); // 30

const numbers = [1, 2, 3, 4, 5];

// 인덱스 접근
console.log(numbers[0]); // 1

// 변수를 사용하여 동적으로 인덱스 접근
const index = 2;
console.log(numbers[index]); // 3

3. 불변성 유지

리액트는 상태를 업데이트 하기 위해 불변성을 유지해야한다. 객체는 참조 타입이므로 객체 자체를 직접 변경 했을 경우, 불변성이 깨질 수 있다. 반면 배열은 요소를 변경 하더라도 기존 배열에 영향을 주지 않기에 상태 업데이트에 안전한 처리가 가능하다.

4. useState의 업데이트 함수

useState 의 상태를 업데이트 하는 함수를 한다. 배열을 사용하면 업데이트 함수를 호출할 때 새로운 배열을 전달 할 수 있다. 이는 객체보다 더 쉬운 로직으로 가능하게 해준다.

---

객체를 사용하면 상태의 속성에 이름을 지정하여 가독성이 높아질 수 있지만, 배열을 사용하는 것이 더 간결하고 안정적이기 때문에 사용한다고 한다.