[React] useState === 상태?

React의 함수형 컴포넌트에서 상태를 사용하는 방법이라고 하면 무엇이 먼저 떠오르시나요? 아마 많은 분이 useState를 가장 먼저 떠올리실 것 같습니다. useState는 이름에서도 알 수 있듯이 상태를 관리하는 대표적인 방법입니다. 하지만 이것이 유일한 방법은 아닙니다. 이야기를 진행하기에 앞서 우선 상태에 대해 이해할 필요가 있어 보입니다.

상태란 무엇인가

상태는 특정 지점에 위치한 정보를 말합니다. 감이 잘 안 오시나요? 울타리를 예로 들어보겠습니다. 이 울타리는 빨강, 초록, 파랑 총 세 가지 색으로 칠할 수 있다고 합시다. 우선 빨간색으로 칠해보겠습니다. 무슨 색으로 보일까요? 맞습니다. 빨간색으로 보일 것입니다. 그렇다면 초록색은? 파란색은 어떤가요? 결과는 쉽게 예상하셨을 것입니다. 여기서 울타리의 색상이 바로 상태를 의미합니다.

상태와 값은 동일하지 않지만, 상태는 값으로 표현될 수 있습니다. 울타리의 색상이 위 세 가지 색으로 표현될 수 있는 것처럼 말입니다. 어느 정도는 감이 오셨을 것 같습니다. 상태는 개념일 뿐으로 특정 라이브러리, 프레임워크, 프로그래밍 언어, 심지어는 컴퓨터 과학 분야에도 종속되지 않습니다. 오히려 현실의 개념을 그대로 받아들이시는 것이 더 적절할 것입니다.

왜 useState인가

useState는 유일한 선택지가 아닙니다. 이 외에 useRef, useMemo 등도 모두 상태를 관리하기 위한 기능입니다. 심지어 아래의 단순한 코드조차 상태를 사용하고 있습니다.

const color = "red";

더 이상 useState의 사용 목적이 단순히 '상태를 사용하려고'에 있다고 말할 수 없습니다. 그렇다면 진정한 목적은 무엇일까요? 그것은 바로 반응성에 있습니다. 상태를 사용하는 무수히 많은 방법이 있지만 변경을 시스템에 알리는 방법은 매우 제한적입니다. 이것이 바로 useState가 갖는 차별화되는 이점입니다.

읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.