[상태관리] 상태관리(State)

오늘은 React 에서 빼놓을 수가 없는 상태관리 이야기를 하러왔다.

상태관리라고 하면 처음 리액트를 접하는 사람들 기준에서 글로벌이니 지역이니, redux면 dispatch니 어쩌구 저쩌구, 상당히 많은 어려움을 느끼는데 쉽게 한번 정리해보려고 한다.

0. 전역? 지역?

React 초심자 기준 이게 진짜 어지러운데, 상태관리 라이브러리를 쓰는 이유는 전역상태를 잘 관리하기 위함이다. 

그럼 전역이 뭘까? 쉽게 얘기하면 서버가 전달해준 데이터들을 따로 창고에 박아두고, 필요할때마다 App 전체 컴포넌트에서 자유롭게 꺼내 쓸 수 있도록 하는게 전역이다. 반대로 지역은 굳이 창고에 넣어둘 필요없이 특정컴포넌트만 사용하고 안쓸거다! 라고 하는걸 주로 지역으로 사용한다. 

 

 

1. useState (가장 기본!)

React는 기본적인 상태관리를 제공한다. useState라는 hook을 사용하게 되는데, (물론 클래스형으로 개발하면 아니다.)

useState 는 값을 가지고 있는 변수 하나와 이 변수를 변경할 수 있는 setState함수 두가지로 구성된다.

그러니까 이전에 const state = 0; 이렇게 작성하던걸 const [state, setState] = useState(0);

이렇게 작성하게 된다. 그리고 이 state라는 이름의 변수를 활용해서 setState라는 Action이 발생하게 되면 SideEffect를 끌어내는 방식으로 앱이 움직여나가게 된다. 

주로 이 useState는 지역 그러니까 특정 Component안에서만 사용되는 변수로 활용된다. 

초기 React 프로젝트에서는 당연히 앱 전역으로 활용되어야하는 변수들 역시 useState로 구성했겠지만, 이 React App의 특성 상 최상단에서 선언된 State의 경우 Props라는 이름으로 하위 Component들에게 전달해주는 과정을 필요로 하기 때문에 그 불편함을 개선하고자 다양한 상태관리 라이브러리들이 출시되기 시작했고, 때문에 현재 useState는 주로 지역에서 활용하게 된다. 

 

2. createContext, useContext (React가 제공하는 상태를 전역에서 활용할 수 있다!)

App의 상단에서 state를 선언하고 props로 내려주는 것이 번거롭기 때문에 이런 걸 만들어줬다는 생각을 한다. 

useContext의 경우 Props로 내려줄 필요없이 createContext에 의해 만들어진 Provider로 감싸고 있는 Children 요소들은 모두 동일하게 접근을 할 수 있도록 해준다. 

때문에 전역으로 사용해야하는 State들을 굳이 Props로 내려주는 절차를 생략하고도 편하게 사용할 수 있다. 

 

다음 글에서 상태관리 라이브러리 (Redux, Mobx, Recoil, Zustand, React-Query...) 들을 하나하나 살펴볼까 한다.

앞서 React에서 자체적으로 제공하고 있는 hooks를 통한 상태관리를 살펴봤는데, 그 보다 더 전역상태를 더 예쁘게 잘 관리할 수 있는 라이브러리들이 많다. 각자 특징이 있고, 사용방법이나 체계가 다르다보니, 설명이 길어질 것 같아 자세한건 각 라이브러리마다 글을 하나씩 작성하도록 하겠다. (내가 사용해본거만 쓸거임. Redux, Mobx, React-Query)