웹 환경에서 일하다 보면 흔히 들을 수 있는 용어가 컴포넌트(Component)이다. 컴포넌트는 무엇을 의미하고 어떻게 다른지 알아보고자 한다.# 컴포넌트란?컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다.이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다.웹사이트를 구축할 경우 모든 것을 새로 만드는 웹 사이트를 상상조차 할 수 없는게 현실이다. 대부분이 라이브러리, 플러그인, 모듈 그리고 컴포넌트로 재사용이 되는 부분들이 대단히 많다
Last Modified : 2017-09-21 00:08:27
VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), Vuex 아니면 Props를 사용할 수도 있죠. 여기서 Props를 사용하는 방법이 많이 사용되는데요 ~! Props를 사용한 컴포넌트간의 데이터 전송방법부모, 자식 컴포넌트 사이에 Props를 사용하면 부모에서 자식으로 데이터를 전송할 수 있지만 반대로 자식에서 부모로 전달할 수 없는 문제가 생깁니다. 그럼 어떻게하면 해결할 수 있는지 아래에서 알아봅니다.(참고사항. Vue 2 이전에는 props를 사용하여 동일한 스코프 모델명을 사용하면 서로
Last Modified : 2019-08-06 00:08:34
VueJS에서 컴포넌트 등의 요소를 숨기거나 보여주는 방법으로 v-if 디렉티브를 사용할 수 있습니다. 아래에서 자세히 알아봅니다.? VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은?일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show를 사용하는 방법입니다. 간단하고 빠르게 적용할 수 있기 때문이죠. 그런데 이 둘 중 어떤 것을 사용해야 할까요?! v-if 그리고 v-show의 차이점은?이 둘의 공통점은 둘 다 동일한 기능으로 숨기거나 보여준다는 점이지만 기능 구현에 큰 차이점이 있습니다. 가장 큰 차이점은 실제 DOM을 그려주느냐의 여부에 따라 차이가 있습니다. 예를들어 v-if는 DOM 영역에 실제로 그려주지 않는 방법을 사용하고 이와 달리 v-show는 단지 css style의 dis
Last Modified : 2019-08-25 21:01:51VueJS에서 많이 사용되는 UI 라이브러리인 element UI의 diablog 컴포넌트에 대하여 알아봅니다.# dialog component화면에 window.open()의 새로운 창이 아닌 내부 레이어를 사용한 모달창을 띄우는 경우 dialog라고 부르기도 합니다. 엘리먼트UI(element UI) 역시 dialog를 사용할 수 있도록 컴포넌트를 제공합니다.<el-dialog></el-dialog>이 컴포넌트를 사용하면 쉽고 빠르게 모달창을 만들고 제어하는 것이 가능합니다. 몇 가지 장점으로는...- Body 태그에 추가할 수 있음- open, close 이벤트에 추가로 컴포넌트가 사라지거나 제거하는 경우의 제어도 가능- 외부 클릭 닫기 또는 fullscreen 옵션 지원이처럼 유용한 옵션을 제공합니다
Last Modified : 2019-11-08 07:45:08모듈과 컴포넌트는 매우 중요한 개념이며 최근의 개발 디자인 패턴을 따르기 위해 반드시 이해해야만 합니다. 이 둘은 매우 비슷하지만 같지 않기 때문에 잘못 이해할 경우 혼동을 줄 수 있습니다.모듈과 컴포넌트의 공통적인 부분은 어떤 서비스의 공통화를 하기 위한 목적을 가지며 하나의 단위로 구분될 수 있습니다. 여기서 모듈은 개별 단위가 동작할 수 있는 기본 단위가 될 수 있다는 점이라면 컴포넌트의 경우 하나의 기능 역시 컴포넌트 단위로 나뉠 수 있습니다. 이런 이유로 모듈과 컴포넌트는 1:1 이 될 수도 있지만 1대 다가 될 수도 있습니다. # 모듈의 역할 및 목적모듈화를 통해 얻을 수 있는 점은 의존성 선언을 통하여 서로 간섭받지 않도록 구분하고, 재사용이 가능한 분리된 코드의 작성이 가능하게 한다는 점입니다
Last Modified : 2017-08-16 17:04:48React 앱 개발시 클래스형, 함수형, 배열형 컴포넌트를 생성하고 사용하죠. 이 때 함수형 컴포넌트에서 Props를 전달 받아 사용하는 방법에 대하여 알아봅니다.! 함수형에서 Props 전달이 가능할까?당연히 가능합니다. 컴포넌트에서 부모와 자식 사이의 데이터를 전달하기 위한 다양한 방법 중 Props는 여전히 많이 사용되는 방법입니다.(@ Tips)다만 다른 프론트엔드 프레임워크와 달리 Props 사이의 데이터 흐름이 양방향(Two ways)가 아니므로 업데이트를 컴포넌트 사이에 전달하기에 필요한 부분이 존재하죠. 양방향은 편리한 만큼 성능 상의 이슈가 존재하는 단점이 있죠.이런 부분은 알고 가면 좋겠죠. 그럼 아래에서 함수형 컴포넌트를 생성하고 Props를 전달하는 예제를 만들어보죠.# 함수형 컴포넌트
Last Modified : 2020-10-16 12:05:06React 앱에서 css를 선언하여 사용하는 방법에 대하여 알아보려고 합니다.# React 앱에서 css 스타일 선언 및 사용하기스타일을 선언하고 사용하는 방법은 크게 두 가지로 구분됩니다. 하나는 모듈 형태로 추가하여 사용하는 방법이고 다른 하나는 jsx 파일 내부에 style 태그를 추가하여 사용하는 방법입니다.둘 다 사용되는 방법이지만 여기서는 jsx 파일 내부에 style 태그를 인라인으로 추가하는 방법을 알아보고자 합니다.jsx에 style 태그로 추가하는 방법! jsx에 inline 태그 형식으로 추가하는 방법jsx 타입의 경우 내부에 렌더링 할 태그 요소를 직접 입력할 수 있습니다. 이 때 style 태그 요소 역시 추가할 수 있습니다. 이 경우 전역 스타일(global style)과 컴포넌트
Last Modified : 2020-07-15 17:07:18
React 앱 내부에서 사용할 컴포넌트의 태그를 다른 것으로 변경하는 방법을 알아봅니다.# react 컴포넌트 태그를 변경, 바꾸기 예를들어 기본값은 span 태그를 사용하되 옵션으로 div 태그를 사용할 수 있도록 변경이가능한 컴포넌트를 만드는 방법입니다.구현하기 위해서 아래와 같은 순서대로 수행하게 됩니다.1. 사용할 태그 요소를 props로 받음2. props가 없는 경우는 기본값 span을 사용함3. 변수 Tag를 선언 후 props 값을 적용그럼 아래에서 간단히 예제를 만들어보려 합니다.아래 예제는 myComponent를 불러와 사용합니다. 이때 div 태그에 출력, 렌더링하려고 합니다.@ myApp.jsximport myComponent from '../myComponent';...<myCompo
Last Modified : 2020-11-06 07:55:11