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

정태웅님의 프로필 이미지
정태웅

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

공통 컴포넌트 구현(4) - template 속성과 v-if 디렉티브 활용 2

안녕하세요! 컴포넌트 설계 방법 질문드립니다!

작성

·

165

1

지금까지 부모 컴포넌트에서 비동기처리후 데이터를

자식컴포넌트에 props로 전달하는 방법으로 구현을 했었는데 

ListItem 컴포넌트처럼 ListItem에 쓰이는 모든 데이터는

 그자체 컴포넌트에서 관리(비동기처리)하는게 더 옳은 방법인거 같기도하고.. 분기로직을 짜는게 영 불편하기도하고.. 

 이 두 방법에 차이점이 있을까요? 

답변 1

0

안녕하세요 태웅님, 말씀하신 것도 좋은 방법입니다. 컴포넌트 설계는 컴포넌트를 함수로 바라보시면 설계하시기가 수월하실거에요. 부모에 데이터를 놓고 자식에 데이터를 내려주는 것은 함수의 파라미터와 같은 구조이고, 자식에서 데이터를 놓고 관리하는 것은 함수의 내부에 분기문을 치는 것과 느낌이 비슷합니다.

// 부모에서 자식으로 프롭스를 내리는 것을 함수로 빗댄 구조

function hello(data) {

  if  (data === 1) {

    // ...

  }

}

// 자식에서 데이터를 선언하고 컴포넌트를 사용하는 곳에 따라 내부 로직을 분기하는 모습을 빗댄 구조

funciton hello() {

  var data;

  if (data === 1) {

    // ...

  }

}

정태웅님의 프로필 이미지
정태웅

작성한 질문수

질문하기