인프런 커뮤니티 질문&답변
작성한 질문수
스토어를 왜 사용하는지 궁금합니다
작성
·
233
퀴즈
reset.css를 사용하는 주요 목적은 무엇일까요?
웹사이트 성능을 최적화하기 위해
브라우저별 기본 스타일을 초기화하여 일관성을 확보하기 위해
특정 HTML 요소에 애니메이션 효과를 쉽게 적용하기 위해
자바스크립트 코드 내에서 CSS를 직접 작성하기 위해
답변 1
1
스토어와 스토리지는 데이터를 저장할 수 있다는 측면에서는 같습니다.
하지만 스토리지에 저장한 데이터는 반응성(Reactivity)이 없습니다.
예를 들어, 스토리지에 저장된 abc 데이터를 A 컴포넌트와 B 컴포넌트에서 사용하고 있다고 가정해 보죠.
만약 A 컴포넌트에서 abc 데이터를 최신으로 수정했다면, B 컴포넌트에서 그에 맞게 반응(화면 갱신)이 있어야 하지만, 스토리지에 저장된 데이터는 관련 기능이 없습니다. 따라서 B 컴포넌트에서 출력되는 abc 데이터는 최신이 아닐 겁니다.
그런데 만약 abc 데이터를 스토어에 저장한다면, 기본적으로 반응성을 가질 수 있기 때문에, A 컴포넌트에서 abc 데이터를 수정했다면 바로 B 컴포넌트에서 반응해 출력됩니다.
Svelte 같은 프레임워크를 사용하는 아주 중요한 이유 중 하나가 반응성이기 때문에, 반응성이 필요한 데이터를 다룰 때는 스토어에 저장해야 합니다.
그렇다고 무조건 스토어가 좋은 건 아닙니다. 상황에 맞게 해당 저장소를 사용하는 것이 필요합니다.
굳.이. 구분하자면,
반응성이 필요한 데이터는 당연히 스토어에 저장,
반응성이 필요없고 수정 가능성이 없거나 낮은 데이터는 스토리지에 저장도 무방.
정도로 정리할 수 있을 듯합니다.
추가로 스토리지도 로컬 vs 세션으로 구분되니 따로 학습해 보시면 좋을 듯합니다.
아주 간단하게 정리하면 다음과 같습니다.
로컬 - 데이터 반영구저장
세션 - 브라우저(탭) 종료되면 데이터 없어짐