useState는 왜 배열 디스트럭처링을 사용할까?

여태 React로 개발을 하면서 아마 가장 자주 쓴 hook이 뭐냐고 묻는다면 useState가 Top 3안에 무조건 든다고 장담할 수 있을 것이다.

 

근데 개발을 하면서 왜 useState는 배열로 묶어서 선언하는 방식으로 해야 하는 것인지에 대해 생각을 해본 적이 없다.

 

그래서 길진 않지만 알아본 내용을 살짝 풀어 보려고 한다.

 

---

 

배열 디스트럭처링(Array Destructuring)

본론으로 넘어가기 앞서 배열 디스트럭쳐링(Array Destructuring)이란 무엇일까

 

배열 디스트럭처링(Array Destructuring)은 JavaScript에서 배열에서 원소들을 추출하여 개별 변수로 할당하는 문법적인 기능이며, 이를 통해 배열의 각 원소에 접근하고 값을 할당하거나 읽을 수 있다.

 

기본적인 배열 디스트럭처링의 문법 예시는 아래와 같다.

 

const [element1, element2, ..., elementN] = array;

 

위의 코드에서 array는 디스트럭처링할 배열을 나타내며, element1부터 elementN은 추출된 배열의 각 원소를 나타내는 변수다.

 

배열의 첫 번째 원소는 element1에 할당되고, 두 번째 원소는 element2에 할당되는 식으로 진행되는데, 배열의 길이보다 많은 변수를 선언할 경우, 초과된 변수는 undefined로 할당된다.

 

배열 디스트럭처링은 배열의 특정 위치에 있는 원소를 추출하는 것뿐만 아니라, 나머지 연산자(...)를 사용하여 나머지 원소를 새로운 배열로 할당하는 등 다양한 활용이 가능하다.

 

아래는 몇가지 예시이다.

 

const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

 

배열 디스트럭처링의 이점

1. 간결하고 가독성 좋은 코드 :  이는 변수 할당을 여러 줄에 나누지 않고 한 줄에서 처리할 수 있으므로 코드가 간결해지고 가독성이 향상된다.
2. 변수 선언 유연성 : 배열 디스트럭처링을 사용하면 배열의 각 요소를 원하는 개별적인 변수로 선언할 수 있다.

 

useState의 반환 값

useState 훅은 React 함수 컴포넌트에서 상태를 관리하기 위해 사용된다.

 

이 훅은 배열을 반환하는데, 첫 번째 요소는 상태값이고, 두 번째 요소는 상태를 갱신하는 함수이다.

 

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

 

위의 코드에서 [count, setCount]는 배열 디스트럭처링을 사용하여 useState의 반환값을 각각의 변수에 할당된다.

 

count는 현재의 상태값을 나타내고, setCount는 상태값을 갱신하는 함수다. 초기 상태값으로 0을 전달하였으므로, count 변수는 초기에 0을 가지게 된다.

 

배열 디스트럭처링을 사용하지 않을 경우

배열 디스트럭처링을 사용하지 않고 useState의 반환값을 다루는 경우에는 코드의 가독성이 떨어질 수 있다.

 

일반적으로 useState를 호출하면 배열이 반환되고, 이 배열의 첫 번째 요소는 상태값이고, 두 번째 요소는 상태 갱신 함수이다.

 

만약 배열 디스트럭처링을 사용하지 않고 useState의 반환값을 다룬다면, 다음과 같은 코드가 될 수 있다.

 

const state = useState(0);
const count = state[0];
const setCount = state[1];

 

위의 코드에서 useState(0)은 배열을 반환하고, state 변수에 할당된다.

 

그리고 count 변수에는 state 배열의 첫 번째 요소인 상태값을 할당하고, setCount 변수에는 두 번째 요소인 상태 갱신 함수를 할당한다.

 

이런 경우, 코드가 길어지고 가독성이 떨어지며, 각 변수의 역할을 명확하게 이해하기 어려울 수 있다. 

 

배열 디스트럭처링을 통해 얻는 이점

반환값 구조 파악

useState는 배열 형태로 값을 반환한다. 이때, 배열 디스트럭처링을 사용하면 반환된 배열에서 각 요소를 개별 변수에 할당할 수 있으며, 이는 코드를 읽을 때 반환된 값의 구조를 쉽게 파악할 수 있게 해준다.

 

변수 명명 유연성

배열 디스트럭처링을 사용하면 변수의 이름을 원하는 대로 지정할 수 있다. useState의 반환값은 첫 번째 요소가 상태 값이고, 두 번째 요소가 상태를 갱신하는 함수인데, 디스트럭처링을 사용하면 이를 state와 setState와 같이 의미 있는 변수명으로 할당할 수 있게된다.

 

코드 가독성 향상

배열 디스트럭처링을 사용하면 변수 할당을 한 줄에 간결하게 표현할 수 있다. 상태 값과 상태 갱신 함수를 각각 개별 변수로 선언하고 할당하는 것이 아니라, 한 줄로 변수를 선언하고 동시에 할당할 수 있다. 이는 코드의 가독성을 향상시키고, 상태 관리 코드를 간결하게 유지할 수 있도록 도와준다.

 

초기값 설정

배열 디스트럭처링을 사용하면 초기값을 설정할 수 있다. useState의 첫 번째 요소로는 상태 값이 들어가고, 두 번째 요소로는 상태를 갱신하는 함수가 들어가는데, 배열 디스트럭처링을 사용하면 초기값을 변수에 할당할 때 기본값을 설정할 수 있다. 이를 통해 초기값을 유연하게 설정하고 상태 초기화를 보다 편리하게 수행할 수 있다.

 

결론

장황하게 적었지만 결국 useState 훅이 배열 디스트럭처링을 사용하는 이유는 코드의 가독성과 편의성을 높이기 위함이다.