-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
기존 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다
24.03.05 13:47 작성 조회수 117
1
안녕하세요 소플님, 강의 정말 잘 보고 있습니다!
항상 이해하기 쉽게 질 높은 강의를 제공해주셔서 감사드립니다.
아래와 같은 점이 궁금해 질문을 드립니다.
제목에서처럼 브라우저에서 제공하는 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다. 브라우저 Storage API를 사용하는 것과 비교해 어떤 이점을 갖고 있는지 여쭤보고 싶습니다.
브라우저 Storage API를 react에서 사용했을 때 react에서 제공하는 기능을 사용할 수 없게 되는 제약 같은 것이 있는지 궁금합니다. 만약 그렇다면 가상 DOM환경과 관련이 있는지도 궁금합니다. 예를 들어 localStorage에 저장되어 있는 데이터를 useMemo로 의존성을 갖게 하여 데이터를 관리할 수 있는지와 같은 것입니다.
React를 배운지 얼마 안되어서, React에 대해 잘 파악하지 못하고 하는 질문일 수도 있는 점 양해를 구하고 싶습니다 ㅜㅜ,,
감사합니다!
답변을 작성해보세요.
1
1
Inje Lee (소플)
지식공유자2024.03.05
안녕하세요, 소플입니다.
질문해주신 내용에 대해 답변드립니다.
Web Storage API를 사용하지 않고 redux-persist를 사용하는 이유
redux-persist는 내부적으로 Web Storage API를 사용하여 데이터를 저장하고 불러옵니다.
그래서 엄밀히 말하면 redux-persist를 사용하면 Web Storage API를 사용한다고 할 수 있는 것이죠.
개발자가 직접 Redux Store의 데이터들을 localStorage(또는 sessionStorage)에 저장하고,
페이지가 로딩될 때 다시 불러와서 Redux Store에 데이터들을 채워넣도록 구현할 수도 있습니다(Hydration).
하지만 일일이 다 구현하려면 번거롭기 때문에,
그걸 라이브러리 형태로 쉽게 사용할 수 있도록 구현해놓은 것이 바로 redux-persist라고 보면 됩니다.
Web Storage API를 React에서 사용했을 때 제약이 있는지?
리액트에서 Web Storage API를 사용하는 것에는 일반적으로 큰 제약은 없습니다.
그래서 localStorage의 데이터를 가져와서 useMemo 훅을 사용하여 처리하는 것 등은 문제 없습니다.
다만, localStorage, sessionStorage 같은 Storage들은 브라우저(클라이언트)의 영역이라는 점을 기억할 필요가 있습니다.
과거에는 대부분의 컴포넌트가 클라이언트 컴포넌트였기 때문에 큰 문제가 되지 않았습니다.
하지만 최근에는 서버 컴포넌트(RSC, React Server Component)가 점점 대중화 되어가고 있기 때문에,
서버 컴포넌트에서는 Storage에 접근할 수가 없다는 것을 기억하고 구현할 필요가 있습니다.
나중에 Next.js 같은 SSR 중심의 프레임워크를 사용하게 된다면 이 부분이 문제가 되는 경우가 많습니다.
이 점을 잘 숙지하고 Web Storage API를 사용하시면 도움이 되실 겁니다!
감사합니다.
답변 2