Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
itemForm에서 Modal바인딩 질문있습니다.
Đã giải quyết
Viết
·
173
1
itemForm파일에서
<Modal bind:modalActive={$modalActiveItem}>
이렇게 되어있는데요
Modal코드를가보면
<script>
export let modalActive = false
const closeModal = () => {
modalActive = false
}
</script>
{#if modalActive}
<div class="modal-bg" class:show={modalActive === true}>
<div class="custom-modal" class:show={modalActive === true}>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<slot name="modal-title"></slot>
<button type="button" class="btn-close" on:click={closeModal}
></button>
</div>
<slot name="modal-body"></slot>
<slot name="modal-footer"></slot>
</div>
</div>
</div>
</div>
{/if}
이런식으로 modalActive가 boolean으로 되어있습니다.
하지만 itemForm에서
<Modal bind:modalActive={$modalActiveItem}>
여기 코드에서 $modalActiveItem는 store에서
function setModalActiveItem() {
const { subscribe, set } = writable(false)
const openModal = () => set(true)
const closeModal = () => set(false)
return {
subscribe,
set,
openModal,
closeModal,
}
}
export const modalActiveItem = setModalActiveItem()이런형태의 함수이고, 객체형태로 리턴을해주고있는데
블리언 형태로 넣을수가 있는지 궁금합니다.
스벨트에서 블리언 타입이란, 바인드로 존재하는 객체를 넣었을때, 그 객체가 존재하면 그게 true가되는걸까요?
이것도 저것도 아니라면..
함수에 감싸고있지만
const { subscribe, set } = writable(false)
이것때문에 초기값이 false로 리턴이된다는건가요?
어떻게 이게 가능한거지 너무어렵습니다..
Câu trả lời 1
1
위의 내용의 경우는 svelte의 store라는 것 때문입니다.
아래 내용의 경우 writable스토어를 작성하는데 이 writable의 초기값을 false로 설정한 부분이 되겠습니다.
writable스토어의 경우 다음과 같이 초기값을 설정하고 사용하게 됩니다.
지금은 boolean으로 설정했지만 여기에 숫자, 문자 그리고 객체등의 값을 초기화 해서 사용할 수 도 있습니다.
또 초기에 설정된 값의 내용은 변경 가능하지만 타입은 변경이 안됩니다.
그래서 wratable(false)이렇게 설정하면 이 스토어는 boolean타입의 스토어가 된다고 보시면 됩니다. (타입스크립트에서는 이부분이 좀 더 명확해 지긴 합니다. )
writable 스토어는 svelte프레임워크의 한가지 기능이고 아래는 그 사용법이라고 기억하시면 되겠습니다.
그리고 이렇게 설정된 스토어의 값은 ‘$스토어이름’ 이런식으로 값을 불러 사용하면 됩니다.
참고로 이 스토어는 리엑티브적으로 작동합니다. 그래서 이 값을 어딘가에서 변경시키면 이 값을 불러 사용하는 전역에서 이 값을 참고해서 변화가 일어납니다. 이는 프런트엔드에서 아주많이 사용되는 패턴입니다.
이부분이 잘 이해사 되지 않으신다면 아래 챕터를 한번 더 보시기를 추천드리겠습니다.
‘섹션7. Frontend 개발 -개발 준비 및 기본 설정 - Svelte store’
const { subscribe, set } = writable(false)
또 const { subscribe, set } 이 문법의 경우 js의 비구조화 할당이라는 기능이 됩니다.
즉 다음과 같이 정의된 objec에서 a, b값을 가져오는 방법이 됩니다.
const object = { a: 1, b: 2 };
const { a, b } = object;
console.log(a); // 1
console.log(b); // 2
writable의 경우에 updqte, set, 등이 정의 되어 있으니 이를 가져와 사용하기 위한 준비라고 보면 되겠습니다.
답변 감사합니다!