[React] State 이해하기 : useState

리액티브 프레임워크에서 사용하는 특이한 기능 중 하나가 State인데, 처음에 이 개념을 이해하지 못하면 상당히 혼란스러울 수 있다. 특히 웹 개발에서 리액트로 넘어올 경우 동기식 멀티 페이지로 제작되는 기존의 웹에서는 사용할 필요가 없는 개념이기 때문에 더욱 이해가 안 될 수 있는데, 따라서 이를 이해하려면 먼저 리액트의 특징 중 하나인 단일 페이지 어플리케이션에 대해 알아둘 필요가 있다.

SPA (Single Page Application)

단일 페이지 어플리케이션이란 말 그대로 하나의 페이지에서 움직이는 어플리케이션 개념을 의미하는데, 기존의 어플리케이션이 여러 상황에 맞는 페이지로 구성되고 서버 호출을 통해 다른 페이지 주소로 이동하던(hyperlink) 것과는 다른 방식으로 동작한다. SPA는 처음에 랜딩된 페이지뷰 상태에서 페이지 값은 변하지 않고 주어지는 상태(state)에 따라 필요한 구성요소를 불러와서 쓴다. 즉 하나의 뷰(view)에 상태에 따라 정의된 요소들이 나타나는 식이다.

여기서 페이지가 아닌 뷰(view)라고 부르는 것은 모던 어플리케이션의 특징을 담는 상징적인 용어 사용이다. 페이지(page)는 마치 출판물과 같이 상당히 정적인 용어이다. 기존의 어플리케이션은 고정된 형태의 문서가 연결된 형태에서 출발하였기에, 페이지라는 용어가 담는 뉘앙스와 비슷한 역할을 수행했다. 그러나 근래의 어플리케이션에서 보여지는 화면은 유동적이며, 가변적이다. 이는 전반적으로 촘촘히 구성되었다기 보다 각 구성요소의 움직임이 만들어내는 총합에 가깝다. 즉, 어떤 'look'이나 'view'에 가깝다.

이 떄 기존의 웹과 같은 형태로 제작할 때에는 '링크'와 '주소'가 설정되기도 하나, 기존의 서버 URL 개념과는 다르다. 이것은 단지 기존의 서버 호출과 유사한 경험을 전달하기 위해 방식을 모사하는 것으로, 링크를 통해 전달되는 주소의 실제 위치에는 해당 페이지가 존재하지 않으며, 단지 상태(state)를 이용해 주소를 통한 호출과 비슷하게 동작하게 만드는 것이다. 이와 같은 류의 라이브러리를 라우터(router)라고 한다.

즉, 상태(State)는 단일 페이지로 움직이는 어플리케이션 내에서 기존의 동기식 링크 이동과 유사하게 사용자의 이벤트에 따라 뷰를 업데이트하기 위한 매개변수(parameter)이다. 상태가 바뀌면 해당 요소는 다시 렌더링을 하며, 바뀐 상태값을 반영하여 뷰에 표시한다. 때문에 상태를 잘 관리하는 것이 깔끔하긴 하지만 절대로 제작자의 입장에서 직관적이지는 않은, 단일 페이지 어플리케이션을 원활히 만드는데 아주 중요한 점이 된다.

리액트에서 State를 사용하는 방법은 useState라는 훅(hook)*을 쓰는 것인데, 일반적으로 아래와 같이 쓰인다.

const [state, setState] = useState(initialState)

 즉, 상수의 배열로 정의하면 배열 구조가 분해되어 할당되는 방식인데, 이 때 let이 아닌 const로 정의한다. state가 변화하니까 let으로 정의해야 할 것 같지만 오히려 let이 되면 바인딩(binding)이 깨져 더 큰 문제가 생길 수 있어서 그렇게 하지 않는다. 즉, state라는 고정 값과 setState라고 하는 고정된 함수가 묶여서 정의되는 방식이기 때문에 이 결합의 정의가 무너지지 않도록 const를 이용해 정의하도록 되어 있다. 앞서 언급했듯이, state의 변화는 해당 요소를 다시 로드하도록 하기 때문에 상수(const)로 처리해도 문제가 없는데, 다시 로드되면서 상수값이 업데이트 되는 식이기 때문이다.

useState는 리액트의 내장함수이기 때문에 아래와 같이 상단에서 호출(import)만 해주면 쓸수 있으며, useState의 인수로 초기값(initialState)를 설정하면 해당 값이 최초 렌더링 시 state 값으로 매핑된다.

import { useState } from 'react'; // 호출

예를 들어

import { useState } from 'react';
...
const [name, setName] = useState("카리나");
...
function handleClick() {setName('장원영');}

 위와 같은 상태에서 name 상수는 "카리나"를 초기 값으로 갖는 상태로 로드되는데, 여기서 handleClick() 함수가 실행되면 "장원영"으로 업데이트되면서 해당 상태를 가진 요소가 다시 렌더링된다.