인프런 커뮤니티 질문&답변

스토어와 스토리지는 데이터를 저장할 수 있다는 측면에서는 같습니다.

하지만 스토리지에 저장한 데이터는 반응성(Reactivity)이 없습니다.

예를 들어, 스토리지에 저장된 abc 데이터를 A 컴포넌트와 B 컴포넌트에서 사용하고 있다고 가정해 보죠.

만약 A 컴포넌트에서 abc 데이터를 최신으로 수정했다면, B 컴포넌트에서 그에 맞게 반응(화면 갱신)이 있어야 하지만, 스토리지에 저장된 데이터는 관련 기능이 없습니다. 따라서 B 컴포넌트에서 출력되는 abc 데이터는 최신이 아닐 겁니다.

그런데 만약 abc 데이터를 스토어에 저장한다면, 기본적으로 반응성을 가질 수 있기 때문에, A 컴포넌트에서 abc 데이터를 수정했다면 바로 B 컴포넌트에서 반응해 출력됩니다.

Svelte 같은 프레임워크를 사용하는 아주 중요한 이유 중 하나가 반응성이기 때문에, 반응성이 필요한 데이터를 다룰 때는 스토어에 저장해야 합니다.

그렇다고 무조건 스토어가 좋은 건 아닙니다. 상황에 맞게 해당 저장소를 사용하는 것이 필요합니다.

굳.이. 구분하자면,

반응성이 필요한 데이터는 당연히 스토어에 저장,
반응성이 필요없고 수정 가능성이 없거나 낮은 데이터는 스토리지에 저장도 무방.

정도로 정리할 수 있을 듯합니다.

추가로 스토리지도 로컬 vs 세션으로 구분되니 따로 학습해 보시면 좋을 듯합니다.

아주 간단하게 정리하면 다음과 같습니다.

로컬 - 데이터 반영구저장
세션 - 브라우저(탭) 종료되면 데이터 없어짐