전역 상태와 지역 상태 구분을 해보자

 

프로젝트를 진행하면서 굳이 전역으로 관리하지 않아도 되는 상태를 전역으로 관리하고 있음을 깨닫고 전역 상태와 지역 상태를 공부하던 중 정리하는 글입니다. 

 

전역으로 상태를 관리하기 위한 대표적인 툴로 Redux, Redux toolkit이 있습니다. 

저는 이번 프로젝트에서 Zustand라는 툴로 상태를 전역으로 관리했습니다. 

 

제가 사용한 Zustand에 대해서 간단하게 소개하자면, Redux, Redux toolkit, context API 등과 비교하면 사용하기 정말 쉽고, Provider로 감싸주지 않아도 되서 불필요한 렌더링을 줄일 수 있다는 장점이 있습니다. Zustand 사용법에 대해서는 다른 포스팅에 정리하겠습니다. 

 

---

💡전역 상태란?

문서의 어떤 곳에서도 접근할 수 있는 영역을 말합니다. 

따라서 어떤 상태가 전역으로 관리되고 있다는 것은 해당 컴포넌트 뿐만 아니라 외부 컴포넌트 어디에서든지 접근이 가능합니다. 

 

 애플리케이션을 구성하고 있는 코드 어디에서든지 접근이 가능하며, 변화에 따라 렌더링에 영향을 줘야하는 값

 

 

---

프론트엔드에서 관리하는 상태는 크게 다음과 같습니다. 

 

1. 외부에서 받는 동적인 데이터 (ex. server response)

2. 애플리케이션 UI 상태 (ex. 다크모드, 모달)

 

 

💡내가 프로젝트에서 전역 상태를 사용한 예시

 

저는 회원가입, 로그인 파트를 맡으면서 특정 정보를 입력한 유저의 경우 특정 페이지를 다시 렌더링할 필요가 없도록 해야만 했습니다. 

예를 들면 최초 회원가입한 유저의 경우, 로그인 후 견주 인증 페이지를 보여줍니다.

하지만, 견주 인증을 완료한 유저의 경우, 그 유저가 다시 로그인하더라도 견주 인증 페이지를 보여주면 안됩니다. 

 

이를 위해서 로그인 후 (토큰을 발급받은 후) 회원정보를 호출하여 해당 유저의 닉네임과 견주인증 유무를 확인했습니다. 

그리고 호출한 닉네임의 경우에는 전역으로 관리하여 마이페이지에서 다시 호출할 필요없이 store에서 데이터를 꺼내쓰기만 했습니다. 

 

---

💡전역 상태를 쓰는 이유?!

 

상태를 전역으로 쓰지 않는다면? 

1. 서버로부터 데이터를 호출한다. 

2. 데이터를 호출한 컴포넌트의 state로 정의한다. 

3. 이 state를 필요한 컴포넌트로 props로 전달한다. 

👉 상태를 굳이 사용하지 않아도 되는 곳이더라도 props로 전달해야할 수도 있다. 

 

상태를 전역으로 쓴다면?

1. 서버로부터 데이터를 호출한다. 

2. 데이터를 전역으로 저장한다. 

3. 상태관리 store에 접근하여 원하는 값을 가져와서 쓰기만 하면 된다.

👉 컴포넌트의 구조 변경에도 자유로워지고 코드가 훨씬 깔끔해진다. 

 

⚠️ 불필요한 네트워크 비용을 줄이기 위해 필요한 시점에 데이터를 불러오고, 전역으로 관리할 필요가 있다면 전역으로 관리하자! ⚠️

 

---

이걸 다시 생각해보자!

 

Redux에서 서버 데이터를 관리하면 데이터에 접근하는 시점에 데이터가 있음을 보장할 수 없게 된다.

또한 애플리케이션의 크기가 커지면 커질수록 데이터의 흐름을 따라가기 힘들게 된다.

 

---

 

정리

=> 개발자마다 api 호출한 데이터를 전역으로 관리해야하는지에 대한 견해는 다르다. 

내가 생각하기에는 굳이 전역으로 관리하지 않아도 되는 데이터의 경우에는 지역적으로만 상태를 관리해도 충분하기에 구분해서 사용해보자!

 

 

---

참고 자료)

https://jbee.io/react/thinking-about-global-state/

전역 상태 관리에 대한 단상 (stale-while-revalidate)

 

https://www.reddit.com/r/reactjs/comments/k6m35q/when_should_you_store_data_in_global_state_eg/

When should you store data in global state e.g. Context and Redux

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓