Redux 기초 개념 정리(1/4) - Store

안녕하세요, 프론트엔드 개발 관련 지식을 공유하는 FrontOverflow입니다.

이번 글에서부터 총 4편에 걸쳐서 Redux의 기초 개념들을 정리해보려고 합니다.

먼저 첫 번째로 Redux의 Store에 대해서 알아보도록 하겠습니다.

---

컴퓨터공학에서 Store는 보통 저장소라는 의미로 많이 사용됩니다.

비슷한 단어로 Storage라는 단어를 많이 들어보셨을 거라고 생각합니다.

Redux에서도 Store라는 개념이 등장하는데, 여기에서도 동일하게 저장소라는 의미를 갖고 있습니다.

즉, Redux Store는 Redux의 state들이 저장되는 저장소를 의미합니다.

 

Redux를 사용하는 가장 큰 이유 중 하나는 각 컴포넌트에서 선언해서 사용하던 state들을 모아 한 곳에서 관리하기 위함입니다.

그리고 이렇게 state들을 한 곳에 모아서 저장할 때 사용하는 것이 바로 Redux Store입니다.

중앙화 된 Redux Store에 state들을 저장해놓고, 각 컴포넌트에서 필요한 state들만을 가져다가 사용하는 것이죠.

 

기본적으로 Redux Store에 저장된 state들은 메모리 위에 올라가기 때문에,

브라우저를 새로고침 하거나 페이지를 새롭게 로딩하는 순간 다 날아가게 됩니다.

페이지를 라우팅 할 때 react-router 같은 것을 사용하지 않고 아래와 같이 이동하게 되면,

페이지를 새롭게 로딩하면서 Redux Store에 저장된 데이터들이 초기화됩니다.

window.location = '/next-page'

 

참고로 redux-persist 같은 패키지들을 사용하면,

이 데이터들을 모두 localStorage 등에 저장했다가 다시 복원시킬 수 있습니다.

하지만 기본적으로 Redux Store의 데이터들은 휘발성이기 때문에 페이지를 처음부터 로딩 할 경우에는 초기화됩니다.

이러한 기본적인 개념을 잘 이해하고 Redux를 사용하면 더 효과적으로 개발을 할 수 있습니다.

---

다음 글에서 이어서 Redux의 기초 개념들을 살펴보도록 하겠습니다.

감사합니다.