context api VS store

안녕하세요 . 헤로피님

회사에서 React에서 Svelte로 툴 변경을 위해 강의를 수강중인 학생입니다 ^^

svelte의 context API인 getContext, setContext를 보던 중 Store와 비슷하게보여, 하위 컴포넌트에서 동일한 key를 다른 값으로 set해보았습니다. 그런데, 컴포넌트 외부에서 함수가 실행되었다고 에러 메세지가 나오고 이를 확인해보기 위해 검색을 해본결과 context로 넘긴 값은 반응성을 가지지 않는다고 알아 내었습니다.

그렇다면, store객체는 context의 기능과 더불어 어디에서나 사용가능하며, 반응성을 가지는데, 스벨트에서는 비슷한 역할을 하지만, 좀 더 활용방안이 높은 store와 context로 기능을 나누어 놓은 이유가 궁금하네요.

(context의 기능을 실무에서는 하위 컴포넌트로 domain같은 상수 값 들을 전달하는 용도로만 사용하고 store는 반응성을 가질 수 있는 컴포넌트로 구분지어 사용하는 편이 좋을까요 ? 아니면 store로 context의 기능을 대체하여 사용할까요 ? )

hokeys 님 안녕하세요.😄

일단 해당 기능을 제가 만든 것이 아니라서...😱
'왜 기능을 나눠 놓았을까'에 대한 정답은 정확하게 말씀드릴 수가 없겠지만,
개인적으로 생각하는 이유는 있습니다.

Context API는 Props의 부모/자식 관계의 데이터 통신을 확장해 상위/하위로 사용하기 위한 기능입니다.
Props 또한 단방향으로 연결하면 선언 외부에서 수정하는 경우 반응성을 가지지 않습니다.
따라서 Store와 단순 비교로 장단점을 따지긴 무리가 있다고 생각합니다.
특히나 Store가 Svelte에선 내장되어 있어 더 비교 기능처럼 느껴지실 수 있는데요.
보통은 Store 같은 중앙 집중식 상태 관리 패턴 라이브러리는 별도 설치해서 관리해야 하죠.
그래서 제 생각엔 기능을 따로 생각하는 것이 좋을 듯합니다.
개인적으론 상/하위로 계속 뻗어 나가서 데이터를 전달할 수 있다는 부분이 꽤 매력적인 기능으로 생각하고 있습니다.(예를 들어 Vue에선 Provide/Inject가 비슷하게 사용됩니다)

Svelte의 Context API가 활용도가 높지 않다는 부분은 저도 같은 생각입니다만,
실제 개발하면서 간혹 특정 기능이 꽤 유용해지는 순간들이 있다 보니 기본적인 사용 패턴 정도는 기억해 두시는 것이 어떨까 합니다.
결론적으로 말씀하신 "context의 기능을 실무에서는 하위 컴포넌트로 domain같은 상수 값 들을 전달하는 용도로만 사용하고 store는 반응성을 가질 수 있는 컴포넌트로 구분지어 사용하는 편이 좋을까요?" 처럼 사용하시는 것도 좋다고 생각하고,
반대로 "아니면 store로 context의 기능을 대체하여 사용할까요?"처럼 대체하는 기능으로 보시진 않았으면 합니다.

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