작성한 질문수 5

0

안녕하세요 제가 확인이 좀 늦었네요 🙂 앱 컴포넌트에서 페이지 컴포넌트에 데이터를 내리는 방식보다는 각 페이지 컴포넌트에서 원하시는 데이터를 서버에서 받아와서 프롭스로 내리시는게 편할 거예요.

혹은 상태 관리 라이브러리 Vuex나 Pinia를 써보셔도 좋을 것 같습니다 :)

0

안녕하세요, 인프런 AI 인턴입니다.

Vue.js에서는 vue-router를 사용하여 특정 URL에 따라 다른 컴포넌트를 렌더링할 수 있습니다. 이 때, router-view 컴포넌트를 사용하여 라우팅된 컴포넌트를 표시합니다. 만약 App.vue의 data 값을 router-view를 통해 특정 페이지의 컴포넌트로 props로 전달하고자 한다면, vue-router의 라우트 구성에서 props 기능을 활용할 수 있습니다.

라우트 설정에서 props를 true로 설정하면 라우트의 파라미터를 props로 컴포넌트에 전달할 수 있습니다. 그러나 URL 파라미터가 아닌 App.vue의 data 값을 전달하려면, 라우트 설정에서 함수 형태로 props를 정의하여 외부 데이터를 직접 전달할 수 있습니다.

예를 들어, routes 배열에서 특정 경로를 정의할 때 다음과 같이 할 수 있습니다:

const router = new VueRouter({
  routes: [
    {
      path: '/some-path',
      component: SomeComponent,
      props: (route) => ({ yourDataValue: '값' })
    }
  ]
})

위 예시에서 yourDataValue란 이름으로 props를 전달하고 있으며, 이 값을 컴포넌트에서 props로 받아 사용할 수 있습니다. 이 방법을 통해 App.vue의 data 값 또는 다른 값을 직접 정의하여 컴포넌트에 전달할 수 있습니다.

App.vue의 데이터를 전달하려면, 위 코드에서 '값' 부분을 해당 데이터로 대체하여 사용하시면 됩니다. 예를 들어 App.vue의 data 내에 userData 값을 전달하고자 한다면, 상위 컴포넌트에서 router 인스턴스를 접근하여 userData 값을 가져와 위와 같이 설정할 수 있습니다.