인프런 커뮤니티 질문&답변
작성한 질문수
Store강의 질문 (시작하기-5)
작성
·
236
1
시작하기-5 store 강의를 듣던중, 마지막 부분에서 다음과 같이 선생님의 코드와 똑같이 코딩했는데도 result 창에 name에 할당된 world라는 string이 보이지 않습니다.
코드 내용은 아래와 같습니다.
-app.svelte 파일
<script>
import {storeName} from './store.js'
//store객체를 가지고 온다
import Parent from './Parent.svelte'
let name = 'world';
$storeName = name
//이렇게 storeName에 name(world)를 할당한다 이제 이 name을 스토어에 저장되었기때문에 name을 사용할 수 있다.
// console.log(storeName)
//console찍어보면 set, update,subscribe 3개의 메소드가 나온다. 내장 메소드.
// console.log($storeName)
// $기호를 써서 storeName의 데이터를 출력한다. 지금은 빈 문자열로 해놔서 콘솔창열어도 데이터가 안보임.
//이걸 quto-subscribtion이라고한다.
</script>
<h1>Hello {name}!</h1>
<Parent/>
<!--원래는 app.-Parent.-child.으로 부모자식관계가 연속적으로 형성되어 name이라는 변수를 위 <Parent/>에 props개념으로 할당하여, app.svelte의 name변수를 child까지 내려서 사용할 수 있는데, 이렇게하면 이 관계가 복잡하고 많아졌을때 감당하기 힘드므로 store라고 외부에 빼놔서 그걸 사용한다. -->-store.js 파일
import { writable } from 'svelte/store'
//svelte에 store라는 개념이 있는데 이걸 쓸수있게하여 import하겠다는 뜻.
// writable뿐 아니라 읽기전용-readable, 계산된데이터를? 뽑아내는 get이 있다
export let storeName=writable('ㅇㅇ')
//빈 값으로 초기값을 지정하여 나중에 입력하려함. 초기값을 다른 값으로 지정해도 됨.
//즉, 초기값으로 ''을 지정해서 storeName변수에 넣고, 이걸 export해서 외부에서 사용할수 있게함.
//이때 let=''을하지않고 굳이 함수로 지정하는건 writable함수가 나중에 수정가능하기 때문
-Child.svelte파일
<script>
// import Child from './Child.svelte'
import { storeName } from './store.js'
//storeName이라는 객체를 가져올건데, 이파일 주변에 있는 store.js에서 가지고 온다는 것
</script>
<div>
child {$storeName}
</div>
<child/>혹시 몰라 위와 같이 필기한 내용까지 그대로 넣은점 양해부탁드립니다!
아무리 보아도 입력하란대로 그대로 입력한것 같은데,,, result 창에 world가 나오지 않는 이유를 모르겠습니다 ㅠㅠ
답변 7
0
대소문자 구분으로 질문이 해결되셔서 다행입니다.
그런데 Parent와 Child 컴포넌트를 연결하지 않아도 Store를 통해서 통신하는 개념에 대해서 아직 의문이 있으시군요!
해당 내용에 대해 어떻게 전달할까 고민하다가 유선으로 소통하기 위해 메일 주소를 말씀드렸던 건데,
우선 정리를 해보겠습니다.
만약 그래도 이해가 되지 않으신다면 메일로 연락드리겠습니다.
아래 답변을 참고하세요.
---------
(.svelte 확장자를 생략했고, 대문자로 시작하는 단어(파스칼 표기법)는 모두 Svelte 컴포넌트를 의미합니다)
첫 번째, 예제에서 Parent와 Child를 연결한 것은 데이터 통신과는 상관이 없고, 단지 Child가 화면에 표시되려면 어떤 방법이든 App과 연결되어 있어야 하기 때문입니다.
그래서 현재 구조가 `App ==>> Parent ==>> Child` 인 것은, Child가 Parent라는 '부모' 컴포넌트와 꼭 Props 혹은 Dispatch를 통한 부모/자식 간 데이터 통신을 하지 않아도 Store를 통해 App과 다이렉트로 데이터 통신이 가능하다는 것을 설명하기 위한 구조입니다.
두 번째, Store를 사용한 데이터 통신에 대한 개념은 hat sonn 님께서 말씀하신 것이 맞습니다.
단지 현재 구조가 `App ==>> Parent ==>> Child`인 것 때문에 헷갈리시는 것 같아서,
그렇다면 `App ==>> Parent` 그리고 `App ==>> Child`로 구조를 수정하고 Parent와 Child 간에 통신해 보시면 좋을 듯합니다.
물론 이름은 'parent'와 'child'지만 이름에 의미를 부여하지 않으면, 구조상 부모/자식 관계가 아닌 컴포넌트니까 좀 더 이해하시는 데 도움이 되지 않을까 합니다.
결국 간단히 정리하면,
'부모/자식을 포함한 어떤 관계라도 Store를 통해 데이터 통신이 가능하다.'입니다.
---------
위 답변 확인해 보시고 궁금하거나 이해가 안 되는 부분이 있으시면 편하게 말씀해 주세요~
좋은 하루 보내세요 :)
0
안녕하세요! 요즘 js를 복습하느라 svelte공부를 잠시 중단했어서 이제야 답변 확인하고 재질문 드립니다.
말씀주신대로 대소문자를 살펴보니, Parent.svelte파일 하단에 <child/>로 c를 소문자로 해놓아서 오류가 생겼었고 이를 대문자로 바꾸었더니 강의 화면처럼 정상적으로 표시되었습니다.
<script>
import Child from './Child.svelte'
</script>
<div>
Parent
</div>
<Child/>
이건 수정 후 Parent.svelte의 코드 내용입니다.
하지만 여전히 풀리지 않는 궁금증이 있습니다.
오류의 해결이 저 <Child/>를 통해 해결되었는데, store의 개념상 컴포넌트간의 연결없이도 외부의 저장소인 store.svelte에서 데이터를 빼오는 것이라고 이해했습니다.
그런데 <Child/>나 <Parent/> 등은 store를 쓰지않고 컴포넌트간 '직접연결'할때 쓰는 것으로 알고 있는데,
왜 오류의 지점이 저것이었는지 궁금합니다.
즉, <Child/>이냐 <child/>이냐로 오류가 발생하였는데, store.svelte의 개념을 사용한 이상, 이러한 컴포넌트간 연결 태그가 무슨 소용이 있는가 하는 의문입니다.
만약 메일로 답변주셔야한다면 joj05280959@gmail.com 으로 주셔도 괜찮습니다!
바쁘신 와중에 자세한 답변 남겨주셔서 정말 감사드립니다.
0
hat sonn 님 안녕하세요.
혹시 질문하신 내용은 해결이 되셨나요?
만약 질문과 관련해 추가 설명이 필요하시면 언제든지 부담 없이 새 질문을 남겨주시거나 위에 공개한 메일로 연락주세요.
그럼 즐거운 주말 보내세요 :)
0
첫 번째 질문에서 Child.svelte 코드를 자세히 보시면 <child/>로 출력되어 있는데, 대문자로 시작하셔야 합니다.
소문자로 시작하는 태그는 컴포넌트 출력이 아닌 일반(커스텀) 태그로 출력됩니다.
죄송하지만, 제가 전체 코드 구조를 모르는 상태에서는 답변에 한계가 있습니다.
혹시 괜찮으시면 메일과 유선으로 실시간 소통하는 건 어떠실까요?
질문/답변을 핑퐁하며 조율하는 횟수와 시간을 절약하고 훨씬 명확하게 답변을 드릴 수 있을 듯합니다.
여기는 공개된 장소이니 제 번호를 공개하긴 곤란하고, 제 메일 주소를 알려드리겠습니다.
thesecon@gmail.com 로 연락주시면 훨씬 자세하게 설명드리겠습니다.
0
저는 첫 번째 질문에서 Parent.svelte가 보이지 않아서 Parent.svelte에 Child.svelte가 연결되어 있지 않다고 판단하고 답변을 드렸는데요.
그게 아니시라면 Parent.svelte도 같이 코드를 확인해야 문제를 파악할 수 있을 듯합니다.
혹시 VS Code와 REPL 중에 어디서 테스트하셨을까요?
전체 코드를 모두 복사해서 질문에 남겨주시거나,
REPL이라면 URL 주소 알려주시면 바로 확인해 보겠습니다!
0
빠른 답변 감사드립니다.
여전히 이해가 되지 않는 부분이 있어 재질문 남깁니다 :)
1. 컴포넌트의 연결이 import를 통해 연결하는것을 말씀하시는 것이 맞는지 궁금합니다.
맞다면, 현재 제 파일에서 app.svetle에서는 Parent.svelte에 import로 연결되어있고, Parent.svelte에는 import로 Child.svelte가 연결되어 있기에 현재 지적해주신 '연결이 안되어있다'는 부분에 의문이 있습니다.
(혹시 export가 안되어있는게 문제인가 싶습니다만, 아래 질문과 이부분은 함께 말씀드리겠습니다.
2. 제가 이해하기로는 store의 개념이 App.svelte=>Parent.svelte => Child.svelte로 연결할 필요없이, (즉, Parent.svelte 파일이 아예 없더라도) store라는 외부 공간을 따로 만들어서, 마치 창고에서 물건 가져오듯 쓰는 것으로 이해했습니다.
따라서 import로 Parent 컴포넌트와 Child 컴포넌트, App 컴포넌트가 상호간 연결되어있지 않은 점이 문제가 된다라는 피드백이 이해되질 않습니다ㅠㅠ
감사합니다.
0
hat sonn님 안녕하세요.
내용을 확인하니 Parent.svelte 컴포넌트가 보이지 않네요.
App.svelte는 현재 Parent.svelte를 출력하고 있는 반면, Child.svelte는 출력이 되고 있지 않은 듯합니다.
.
그림으로 표현하자면 다음과 같습니다.
App.svelte => Parent.svelte Child.svelte
정상적인 결과가 나오려면 다음과 같이 연결되어야 하겠죠.
App.svelte => Parent.svelte => Child.svelte
.
App.svelte는 메인 컴포넌트이기 때문에,
화면에 특정한 컴포넌트가 출력되려면 어떤 형태로든 App.svelte와 연결되어 있어야 합니다.
App.svelte를 자세히 보시면 import로 Parent.svelte를 가져오고 있는데,
Parent.svelte는 만들지 않으신 것 같아요. (혹시 만드셨더라도 Child.svelte를 가져오지 않는 듯합니다)
.
Store 파트의 개념은, 꼭 부모/자식 컴포넌트 관계가 아니더라도 데이터를 주고받을 수 있다는 것이니까요.
App.svelte가 Parent.svelte를 가져오고, Parent.svelte가 Child.svelte를 가져오는 구조에서,
Parent.svelte를 거치지 않고도 App.svelte와 Child.svelte가 $storeName으로 데이터를 주고받는 개념이죠.
.
위 내용이 확인해 보시고 혹시 이해되지 않으시거나,
문제가 해결되지 않으면 다시 질문 남겨주시면 감사합니다 :)