뷰 컴포넌트3 [Vue] Component 컴포넌트 만들기 안녕하세요! 오늘은 Vue에서 컴포넌트를 만드는 방법에 대해 포스팅하려고 합니다. 컴포넌트를 만들어 사용하면 여러 가지 장점을 살릴 수 있습니다. 기능의 재사용성, 코드의 가독성, 그리고 모듈화 등 다양한 장점을 활용하여 원하는 기능을 간편하게 구현할 수 있습니다. 컴포넌트를 만들고 활용하는 방법은 간단하지만 중요한 내용이기 때문에 한 번 정리해 보는 것이 좋습니다. 그럼 예제를 통해서 어떻게 구현이 되는지 알아보도록 하겠습니다~ vue 컴포넌트의 장점 1. 재사용성 컴포넌트 기반 접근 방식은 기능을 독립적으로 구성할 수 있어 재사용성이 뛰어납니다. 컴포넌트를 작성하고 필요한 곳에서 여러 번 사용할 수 있으며, 코드의 중복을 줄여 개발 효율성을 높입니다. 2. 모듈화 각각의 컴포넌트는 자체적인 템플릿, .. 2023. 7. 11. Vue3 부모 컴포넌트와 자식 컴포넌트 데이터 주고 받기 안녕하세요. 오늘은 지난 포스팅에 이어서 컴포넌트 간의 데이터 주고받는 방법을 포스팅하려고 합니다. 지난번에는 부모 컴포넌트에서 자식 컴포넌트를 import 시켜 하나의 컴포넌트로 만드는 것을 정리하였고, 오늘은 이어서 부모, 자식 컴포넌트 간의 데이터를 주고받는 방법을 정리해 보려고 합니다. 연동만 시켰다고 실제 업무에 활용하기에는 서로 간의 데이터 연동이 없기 때문에 데이터까지 주고받는 방법을 정리해 두면 실제 업무에 많은 도움이 됩니다. 그럼 오늘도 예제 소스 코드와 함께 하나씩 정리해 보도록 하겠습니다! 1. emit & props 이해하기 소스 코드를 들어가기 전에 간단하게 소스 코드에 대한 프로세스를 그림으로 먼저 그렸습니다. 부모에서 자식으로 전달할 때에는 'props'를, 자식에서 부모로 .. 2023. 1. 31. Vue3 Component 예제를 통해 배워보기 (부모 자식간 연동하기) 안녕하세요. 오늘은 Vue3 환경에서 Component을 다루는 방법을 포스팅하려고 합니다. 요즘은 Vue로 개발하는 환경이 정말 많아진 것 같은데요. Vue의 업데이트도 꾸준히 되면서 새로운 것이 많이 나오고 있습니다. 하지만 어떤 기술이든 기초적인 것이 가장 중요하기 때문에 오늘은 Vue의 Component에 대해서 알아보고 기초적인 것들이 익숙해지고 나면 조금씩 단계를 올려 포스팅해 보도록 하겠습니다. :) ( 저도 기초가 부족해서 오래 걸릴것 같긴 합니다..ㅜ ) Vue를 사용하다 보면 기능별, 메뉴별 등 시스템 설계에 따라 Component를 나눠서 개발을 많이 하는데, 현재 저도 프로젝트를 진행하면서 하나의 페이지를 개발할 때 Component 구조를 잡는데 시간이 많이 들어가고 있습니다 ㅎㅎ.. 2023. 1. 30. 이전 1 다음 728x90
