[React] 배열로 state 변수 선언하는 이유 (useState)

[state 변수 선언]

react에서 함수형 컴포넌트 형식으로 state 변수를 선언할 때, 우리는 아래 코드와 같이 useState() 함수를 사용해서 배열(대괄호)을 이용하여 state 변수를 선언하는 것을 보셨을 겁니다.

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

[배열 구조 분해]

첫번째 인덱스에는 변수명을 입력하고, 두 번째 인덱스에는 set을 붙여서 state 변수를 선언하였습니다.

const [fruit, setFruit] = useState('banana');

위 자바스크립트 문법은 배열 구조 분해라고 하고, fruit과 setFruit, 총 2개의 값을 만들고 있습니다. 즉, useState를 사용하면 fruit이라는 첫 번째 값과 setFruit라는 두 번째 값을 반환합니다. 아래의 코드와 같은 효과를 낼 수 있습니다.

let fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환 let fruit = fruitStateVariable[0]; // 첫 번째 아이템 let setFruit = fruitStateVariable[1]; // 두 번째 아이템

[배열과 배열 구조 분해 접근 비교]

useState를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어집니다. 첫 번째 아이템은 현재 변수를 의미하고, 두 번째 아이템은 해당 변수를 갱신해주는 함수입니다. 배열 구조 분해라는 특별한 방법으로 변수를 선언해주었기 때문에 [0]이나 [1]로 배열에 접근하는 것은 좋지 않을 수 있습니다.

[배열로 접근]

let fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환 let fruit = fruitStateVariable[0]; // 첫 번째 아이템 let setFruit = fruitStateVariable[1]; // 두 번째 아이템

[배열 구조 분해로 접근]

const [fruit, setFruit] = useState('banana');

References

react.org