itemForm에서 Modal바인딩 질문있습니다.

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

item 추가

해결된 질문

작성

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로 리턴이된다는건가요?

어떻게 이게 가능한거지 너무어렵습니다..

mongodb apollo graphql svelte

답변 1

Indie Coder

지식공유자

위의 내용의 경우는 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, 등이 정의 되어 있으니 이를 가져와 사용하기 위한 준비라고 보면 되겠습니다.

반가우면반갑다고해

질문자

답변 감사합니다!

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

itemForm에서 Modal바인딩 질문있습니다.