Movie.svelte의 params 변수

Question

강의 내용에 보면 08분 00초 부근에 Movie.svelte에서 params 변수를 선언하고 id라는 값을 꺼내는 부분이 있는데, 해당 값이 어떻게 전달이 되는지 설명이 없어 해당 모듈(svelte-spa-router)의 github(https://github.com/ItalyPaleAle/svelte-spa-router#parameters-from-routes)을 확인해 보니 params가 고정된 변수처럼 설명이 되어 있네요. 이 부분에 대해서 추가 설명이 필요해 보입니다.

run2nextstep · Answer

답변 고맙습니다. 제가 말씀드리려고 했던 부분은 답변에 포함되어 있는 그러면 컴파일 과정을 통해 svelte-spa-router 모듈이 내부에서 Movie.svelte 컴포넌트를 처리하고, params 라는 Props에 현재 라우터의 파라미터 정보를 전달합니다. 여기서 src/routes/index.js의  '/movie/:id' 로 명시한 내용 중  : (콜론)으로 시작하는 부분( id )을 정규식으로 확인하고  params.id 로 해당 주소를 할당하는 과정이 포함되어 있기 때문에 Movie.svelte 컴포넌트 안에서  export let params = {}  코드를 통해  id  값을 사용할 수 있게 됩니다. 이 부분이 강의에 포함이 되면 더 좋을 것 같아서 입니다. 좋은 강의 고맙습니다.

HEROPY · Answer

heepaanee 님 안녕하세요~😃 강의에서 제 설명이 부족하고 아쉬워서 죄송합니다.😭 heepaanee 님께서 svelte-spa-router의 해당 설명 링크를 남겨주신 것을 보고 사용법은 이해하신 거로 생각되는데요, 혹시 params 라는 데이터가 내부적으로 어떻게 정의되는지 원리가 필요하신가 궁금합니다. 혹은 heepaanee 님께서 내용은 이미 다 이해를 하셨고, 강의에서 부족한 부분(설명)을 지적해 주신 건가도 생각이 듭니다. 만약 동작 원리가 필요하시다면 간단히 정리해 보겠습니다. 혹시 후자라면, 부족한 강의 부분을 보완할 답변이 될 수 있지 않을까 조심스럽게 예상해 봅니다. 일단 프로젝트에서는 src/routes/index.js의 '/movie/:id' 라는 속성(주소)에 Movie.svelte 컴포넌트를 할당했습니다. https://github.com/HeropCode/Svelte-Movie-app/blob/6fc8aeecf04f2d675155ea2e34faf6ad38bdb245/src/routes/index.js#L8 그러면 컴파일 과정을 통해 svelte-spa-router 모듈이 내부에서 Movie.svelte 컴포넌트를 처리하고, params 라는 Props에 현재 라우터의 파라미터 정보를 전달합니다. 여기서 src/routes/index.js의 '/movie/:id' 로 명시한 내용 중 : (콜론)으로 시작하는 부분( id )을 정규식으로 확인하고 params.id 로 해당 주소를 할당하는 과정이 포함되어 있기 때문에 Movie.svelte 컴포넌트 안에서 export let params = {} 코드를 통해 id 값을 사용할 수 있게 됩니다. https://github.com/HeropCode/Svelte-Movie-app/blob/6fc8aeecf04f2d675155ea2e34faf6ad38bdb245/src/routes/Movie.svelte#L7 만약 라우터 옵션을 '/movie/:heropy' 로 명시했다면 params.heropy 로 해당 주소를 할당하게 됩니다. 위 내용으로 답변이 이뤄질지 모르겠네요. 혹시 아쉬운 부분이 있다면 가감 없이 의견 주시면 다시 확인해 보겠습니다! 좋은 말씀 감사드리고, 즐거운 하루 보내세요 ~ 👍