submit click 동작과 PostDetailView 질문있습... - 인프런

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

zzang4355

작성한 질문수

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

공통 컴포넌트 분리 (based on Vue.js 3 spec)

submit click 동작과 PostDetailView 질문있습니다.

작성

수정됨

 @submit.prevent="edit"

이와 같이 submit을하면 form내의 @click이벤트가 선언되지 않은 버튼을 여러개 만들어 각각 클릭해도 동작하는것을 확인했는데 submit 동작이 이러한게 맞는건가요?

다른 질문입니다..

Listview 내 소스입니다.

 <PostDetailView :id="String(initId)"></PostDetailView>

const initId = ref();
const fetchPosts = async () => {
  try {
    const { data, headers } = await getPosts(params.value);
    initId.value = data[0].id;
    posts.value = data;
    totalCount.value = headers['x-total-count'];
  } catch (e) {
    console.error('error', e);
  }
};

이런식으로 initId를 생성해서 넣어주려 했지만 id가 undefined로 초기에 전송이되고 detailView에서 당연히 에러를 내뱉었습니다.

하지만 initId가 반응형으로서 fetchPosts에서 바뀌면 detailView가 다시 랜더링되어서 나와야할거같은데 안나오네요..

개발자도구에서 initId값을 바꿔도 랜더링이 안되는 이유를 모르겠습니다 ....(결국v-if로 해결하긴했지만.. 또한 같은 원리로 AppPagination에서는 pageCount가 초기값이 0인데 fetchPosts를 호출후에 값이 바뀌니 다시 랜더링이 되어서 불러와지는것 같은데 제가 개념을 잘못알고있는걸까요)

vue.js

답변 1

짐코딩

지식공유자

안녕하세요 🙂

답변1) button 태그의 기본 type은 submit 입니다. 그러므로 form 내에 button 태그를 선언했다면 클릭시 form 의 submit 이벤트가 발생합니다.

참고: HTML, JavaScript 에 대한 기초를 충분히 다지는 것을 권장드립니다. 짐코딩 유튜브 채널에 무료 강의가 있습니다.

답변2)

initId 그대로 값 전달

String()으로 initId를 감싸게 되면 Vue의 반응성을 잃어요. String(initId)로 변환하는 순간 initId가 더 이상 Vue의 반응형 시스템에 의존하지 않는 일반 문자열로 변환되기 때문에, 이후 initId 값이 업데이트되어도 PostDetailView 컴포넌트에 반영되지 않습니다.

반응성을 유지하기 위해 String()으로 감싸지 말고, initId 자체를 그대로 전달하는 것이 좋습니다. PostDetailView 컴포넌트에서 필요한 경우 props 내부에서 String 변환을 적용할 수 있습니다.

<PostDetailView :id="initId" />

String 또는 Number를 받을 수 있도록 컴포넌트 내부에서 처리

PostDetailView 컴포넌트에서 props를 받을 때 다양한 타입을 받을 수 있도록 설정할 수 있습니다.

defineProps({
  id: {
    type: [String, Number],
  },
})

이렇게 하면 initId의 반응성이 보존되어 값이 업데이트될 때마다 PostDetailView 컴포넌트도 자동으로 업데이트됩니다.

참고: Vue의 반응형 데이터가 String으로 변환될 경우 반응성을 잃을 수 있으므로, 데이터 변환은 가급적 컴포넌트 내부에서 처리하는 것이 좋습니다.

zzang4355

작성한 질문수

전체 Q&A

질문하기