이 글은 모던 리액트 Deep Dive를 기반으로 작성되었습니다.

리액트 useState

리액트에서 가장 많이 사용하는 함수를 꼽으라하면 useState를 선택할 것이다. 리액트 딥다이브 3장인 '리액트 훅 깊게 살펴보기'에서 useState를 공부를 하다 한가지 의문점이 생겼었다.

useState 훅의 반환 값은 배열이다. (p.190)

이 말이 무슨 말인지 전혀 이해가 안갔다. 디자인과를 전공하여 라이브러리나 언어에 대해서 조금 더 딥하게 알아가면 알아갈수록 자료구조와 같은 지식을 선수한 적이 없기때문에 정말 어렵다..ㅠ

왜 배열 값을 반환하는지 너무나 궁금해서 React의 공식문서에서 useState부분을 확인했었다. 보자마자 이해가 갔다. 아래의 글은 나의 의문에대한 해답이 맞길바란다.

📌useState 사용법

useState 훅을 사용하는 방법은 useState의 인수로 state의 초기 값을 넘겨주고, 아무런 값을 넘겨주지 않으면 초깃값은 undefined를 반환한다. useState 훅의 반환 값은 배열이고 useState의 첫 원소로 state 값 자체를 사용할 수 있고, 두 번째 원소인 setState를 사용하여 첫 원소인 state를 변경할 수 있다. 사용 문법은 아래와 같다.

function Compontent() {
	
    	const [state, setState] = useState(initialState)
}

📌JS 구조 분해 할당

엥? useState를 하다가 갑자기 자바스크립트의 구조분해? 뜬금이 없을수도 있고, 당연하게도 아는 사람도 있을 것이다. 정말 아무생각없이 useState를 쓰던사람으로서 과장해서 소름까지 돋았다.

useState의 초기값이 없으면 왜 undefined을 반환하는지, 왜 배열을 반환하는지 알기위해서는 JS 구조분해할당을 알아야한다. 수업시간에 배웠는데 여기서 볼 줄은 상상도못했다.

JS는 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인 구조 분해 할당(destructuring assignment)을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해(destructuring)는 그 진가를 발휘한다.

💎배열 분해하기

아래의 Array의 배열은 다음과 같이 분리가 가능하다.

let Array = [itemA, itemB];

let [A, B] = Array;

console.log(A); //itemA
console.log(B); //itemB

아래와 같이 배열에 대해 사용자가 명시적으로 지정을 하지 않으면, JS는 비어있는 요소에 접근했을 때 undefined를 반환한다.

let Array = [];

let [A, B] = Array;

console.log(A); // undefined
console.log(B); // undefined

📌구조 분해 할당과 useState의 관계

useState에는 구조 분해할당이 사용되었다고 리액트 공식문서에 나와있다. 둘의 관계를 생각해보니 처음에 가졌던 의문이 해결되었다.

💎useState의 변수 이름 지정

function Compontent() {
	
    	const [state, setState] = useState(initialState)
}

useState의 선언 모습을 보면 배열 구조 분해와 동일하다. 따라서 useState()를 사용하게되면 [dataA, dataB] 와 같은 array가 남는다. dataA에는 변수의 값과 같은 데이터가 들어있고, dataB에는 데이터를 변경할 수 있는 함수가 들어있다. 결국 Hook도 함수이다.

💎useState의 undefined

자바스크립트는 빈 배열에 대해 undefined를 반환하기때문에 사용자가 명시적으로 초기값을 지정해주지 않으면 undefined를 반환한다고 볼 수 있다.

💎useState의 순서

당연하게도 구조 분해 할당의 배열 분해는 배열의 인덱스를 기반하기 때문에 순서가 변경되면 오류가 나거나 함수의 의미가 변한다.

const [state, setState] = useState(initialState); // 올바른 예제
const [setState, state] = useState(initialState); // 잘못된 예제

📌결론

리액트가 자바스크립트의 라이브러리임을 까먹지말자

---

참고자료

React 공식문서
리액트 useState
TIL 50 | React : useState Hook의 구조분해할당
[React] useState 사용 후 state가 undefined로 나올 때
[React] 잘못된 useState 사용