Dev Day

Nuxt.js에서 Props 사용하기

 

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 사용자 지정 특성입니다.

자식 컴포넌트는 props 옵션을 사용하여 전달받을 것으로 기대되는 데이터를 명시적으로 선언해야합니다.

Nuxt.js에서 Vue.js처럼 props를 사용할 시점이 있습니다.

Nuxt.js에서 props 사용은 Vue.js와 크게 다른점이 없기 때문에 무리없이 사용이 가능합니다.

 

Props 표기법

HTML 속성은 대소문자를 구별하지 않습니다.

모든 대문자를 소문자로 인식합니다.

props를 사용할 때, HTML에서는kebab-case(article-data)를 사용하는 것을 권장합니다.

Javascript에서는camelCase(articleData)를 사용하는 것을 권장합니다.

Props 사용법

pages/index.vue

<template>
  <div>
    <PropsTest :test-data="testData"/>
  </div>
</template>

<script>
import PropsTest from "@/components/PropsTest";

export default {
  data() {
    return {
      testData: [
          'props-1', 'props-2', 'props-3'
      ]
    }
  },
  components: {
    PropsTest,
  },
}
</script>

Nuxt.js 2.10 이상 버전부터는 props을 아래와 같이 쓰는 것을 권장합니다. 기존 방식props: ['articleData']를 사용하면eslint(vue/require-prop-types)에 위반돼서 경고가 표시된다고 합니다.

출처 : jhyeok.com/nuxtjs-component-props/

components/PropsTest

<template>
  <div>
    props 로 넘겨받은 데이터
    {{ testData }}
  </div>
</template>

<script>
export default {
  props: {
    testData: {
      type: Array,
      default: []
    }
  }
}
</script>

<style scoped>

</style>

Props Type

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

위 타입들을 제공하며 아래와 같이 사용하면 됩니다.

export default {
  props: {
    testData: {
      type: Array,
      default: []
    }
  }
}

추가적으로 Function type 과 Object type 은 아래와 같이 사용합니다.

export default {
  props: {
    testData: {
      type: Function,
      default: () => {}
    }
  }
}

export default {
  props: {
    testData: {
      type: Object,
      default: () => ({})
    }
  }
}

이렇게 Props Type을 지정해주면 이는 컴포넌트를 읽기 좋게 문서화할 뿐 아니라 브라우저의 자바스크립트 콘솔에서도 잘못된 타입이 전달된 경우 경고를 띄워줄 수 있도록 유효성 체크를 해줍니다.

Props 단방향 데이터 흐름

Vue.js 공식 홈페이지에서는 아래와 같이 안내하고 있습니다.

모든 prop들은 부모와 자식 사이에 단방향으로 내려가는 바인딩 형태를 취합니다: 부모의 속성이 변경되면 자식 속성 에 게 전달되지만, 반대 방향으로는 전달되지 않습니다. 자식의 데이터가 부모에게 전달되는 것을 막는 것은 자식 요소가 의도치 않게 부모 요소의 상태를 변경함으로써 앱의 데이터 흐름을 이해하기 어렵게 만드는 일을 막기 위해서입니다.

물론 의도치 않게 부모 요소의 상태를 변경해서 데이터의 흐름이 꼬일 수 있지만

부모 컴포넌트와 자식 컴포넌트간 양방향 데이터 바인딩이 필요할 때도 있습니다. 이럴땐 $emit() 사용하여 양방향 데이터 바인딩이 가능합니다.

$emit()에 대한 자세한 내용은 나중에 다시 글을 작성하겠지만 부모에게 Props로 받은 데이터가 변경되었을 때 $emit()을 통해 다시 변경된 데이터를 부모에게 전달한다고 생각하시면 됩니다.

 

컴포넌트를 사용하다 보면 props를 사용할 일이생깁니다.

props와 emit은 다음글에서 더 자세한 내용으로 작성하려합니다.