스토어를 왜 사용하는지 궁금합니다

Question

list.js 에서 스토어를 사용안하고 스토리지만 사용해서 할 수도 있는 부분이 아닌가요? 시도는 안해봤지만.. 왠지 스토어가 없어도 될 거 같은데 왜 스토어를 사용하는지 궁금합니다..! 말도 안되는 질문이라면 죄송합니다

HEROPY · Answer

스토어 와 스토리지 는 데이터를 저장할 수 있다는 측면에서는 같습니다. 하지만 스토리지 에 저장한 데이터는 반응성(Reactivity)이 없습니다. 예를 들어, 스토리지 에 저장된 abc 데이터를 A 컴포넌트와 B 컴포넌트에서 사용하고 있다고 가정해 보죠. 만약 A 컴포넌트에서 abc 데이터를 최신으로 수정했다면, B 컴포넌트에서 그에 맞게 반응(화면 갱신)이 있어야 하지만, 스토리지 에 저장된 데이터는 관련 기능이 없습니다. 따라서 B 컴포넌트에서 출력되는 abc 데이터는 최신이 아닐 겁니다. 그런데 만약 abc 데이터를 스토어 에 저장한다면, 기본적으로 반응성을 가질 수 있기 때문에, A 컴포넌트에서 abc 데이터를 수정했다면 바로 B 컴포넌트에서 반응해 출력됩니다. Svelte 같은 프레임워크를 사용하는 아주 중요한 이유 중 하나가 반응성이기 때문에, 반응성이 필요한 데이터를 다룰 때는 스토어 에 저장해야 합니다. 그렇다고 무조건 스토어 가 좋은 건 아닙니다. 상황에 맞게 해당 저장소를 사용하는 것이 필요합니다. 굳.이. 구분하자면, 반응성이 필요한 데이터는 당연히 스토어 에 저장, 반응성이 필요없고 수정 가능성이 없거나 낮은 데이터는 스토리지 에 저장도 무방. 정도로 정리할 수 있을 듯합니다. 추가로 스토리지 도 로컬 vs 세션으로 구분되니 따로 학습해 보시면 좋을 듯합니다. 아주 간단하게 정리하면 다음과 같습니다. 로컬 - 데이터 반영구저장 세션 - 브라우저(탭) 종료되면 데이터 없어짐