Svelte에서 컨텍스트를 사용하는 방법은 무엇입니까?

세 가지 구성 요소 A, B 및 C가 있는 시나리오를 생각해 봅시다. Component A 에서 변수 또는 개체를 정의하려고 합니다. 그리고 우리는 Component C에서 액세스할 수 있기를 원합니다. 이전 기사에서는 props 데이터를 부모 구성 요소에 전달하는 다양한 방법에 대해 설명했습니다. 이 기사에서는 svelte의 컨텍스트 방법에 대해 설명합니다.

Svelte는 부모 구성 요소 데이터를 자식 구성 요소에 전달합니다. getContext 및 setContext 함수는 컨텍스트의 키를 사용하여 연결된 데이터에 액세스할 수 있습니다. 컨텍스트 값에 대한 변경 사항은 현재 하위 구성 요소에만 유효합니다. 상위 구성 요소 값은 그대로 유지됩니다.

사용자가 로그인했고 다른 구성 요소에서 사용자 세부 정보(다른 하위 구성 요소의 이메일 및 로그인 상태)를 표시하려고 한다고 가정해 보겠습니다. 이때 props를 전달하는 대신 Context API를 사용하는 것이 좋습니다. (아마도 상점이 더 적절하겠지만 이 기사의 범위를 벗어납니다.)
App.svelte에서

<script>

    import { setContext } from 'svelte'

    const userDetails = { username: '[email protected]', islogin: 'yes' };

    setContext('user-details', userDetails )

    import ContextComponent from "./ContextComponent.svelte";

</script>

<main>
    <p> Context Example. </p>
    <hr/>

    <div>
        <br />
        <ContextComponent />
    </div>

</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }


    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

setContext{} 기능을 확인하면 비슷한 내용이 표시됩니다export declare function setContext<T>(key: any, context: T): void;.
setContext 함수는 두 개의 인수를 허용합니다.

컨텍스트 키

모든 하위 응용 프로그램 구성 요소를 보내려는 값이나 변수 또는 개체입니다.

setContext('user-details', userDetails ) 컨텍스트 키를 user-details로 설정하고 userDetails 개체를 두 번째 인수로 전달합니다.

Svelte는 getContext 키를 검색하는 setContext 기능을 제공합니다. 다른 구성 요소ContextComponent.svelte를 생성하고 다음 코드를 추가합니다.

<script>
    import { getContext } from 'svelte'

    const userDetails = getContext('user-details')

</script>

<div>
    <div>
        <strong>User Name:</strong> { userDetails.username }
    </div>

    <div>
        <strong>User Login Status:</strong> { userDetails.islogin }
    </div>

</div>

export declare function getContext<T>(key: any): T; getContext 함수가 svelte에서 정의되는 방식.

하나의 인수(키)만 허용합니다. 이 경우 App component( user-details )에서 정의했습니다.

웹 페이지로 이동하면 다음과 같이 표시됩니다.



이것이 Svelte의 컨텍스트에 관한 전부입니다. 다음 글에서 뵙겠습니다.