일반적으로 script 태그에서 setup 속성을 사용하지 않으면, vue.js 코드를 작성할 때 아래와 같이 작성하게 된다. script 태그 setup 속성을 사용하지 않은 경우 {{hello}} 그렇지만 setup 속성을 사용하여 작성하게 된다면 아래와 같이 단축하여 작성할 수 있다. script 태그 setup 속성을 사용한 경우 {{hello}} 위 와 같이 setup 속성을 사용하게 되면 export default 부분과 setup 함수, return 을 사용하지 않고, 변수만 만들어주면 된다. 위에서는 반응형 데이터만 만들어서 해보았는데요. 다음으로는 함수도 만들어서 사용해보도록 하겠습니다! setup 속성을 사용한 함수 사용 {{ hello }} 추가 함수도 return 에 넣어줄 필요 없..

props 구조가 깊게 되어 있다면 Provide와 Inject를 사용해서 해결할 수 있다. Provide 정의 컴포넌트 provide('hello-message', '안녕하세요'); 이 부분은 provide를 정의해주는 코드인데요. 첫 번째 인자로는 키가 들어가고, 두 번째 인자는 다른 컴포넌트로 보낼 데이터를 넣어주면 됩니다. Inject 사용 컴포넌트 {{ helloMessage }} const helloMessage = inject('hello-message'); provide로 정의한 데이터를 화면에 보여주도록 할려고 합니다. helloMessage 변수에 inject로 불러온 데이터를 return 해주면 됩니다. 이러면 provide 함수로 데이터로 넣어준 "안녕하세요"가 화면에 보여지게 됩..