React 앱 내부에서 사용할 컴포넌트의 태그를 다른 것으로 변경하는 방법을 알아봅니다.# react 컴포넌트 태그를 변경, 바꾸기 예를들어 기본값은 span 태그를 사용하되 옵션으로 div 태그를 사용할 수 있도록 변경이가능한 컴포넌트를 만드는 방법입니다.구현하기 위해서 아래와 같은 순서대로 수행하게 됩니다.1. 사용할 태그 요소를 props로 받음2. props가 없는 경우는 기본값 span을 사용함3. 변수 Tag를 선언 후 props 값을 적용그럼 아래에서 간단히 예제를 만들어보려 합니다.아래 예제는 myComponent를 불러와 사용합니다. 이때 div 태그...
React 앱 개발시 클래스형, 함수형, 배열형 컴포넌트를 생성하고 사용하죠. 이 때 함수형 컴포넌트에서 Props를 전달 받아 사용하는 방법에 대하여 알아봅니다.! 함수형에서 Props 전달이 가능할까?당연히 가능합니다. 컴포넌트에서 부모와 자식 사이의 데이터를 전달하기 위한 다양한 방법 중 Props는 여전히 많이 사용되는 방법입니다.(@ Tips)다만 다른 프론트엔드 프레임워크와 달리 Props 사이의 데이터 흐름이 양방향(Two ways)가 아니므로 업데이트를 컴포넌트 사이에 전달하기에 필요한 부분이 존재하죠. 양방향은 편리한 만큼 성능 상의 이슈가 존재하는 ...
VueJS에서 컴포넌트가 아닌 태그를 사용할 경우 에러가 발생합니다. 어떻게 하면 에러가 나타나지 않을까요?예를들어 <myTag></myTag>라는 태그를 웹페이지에 코드에 추가한다고 가정해봅니다.<div id="vueApp"> <myTag>Hi</myTag></div>VueJS에서는 myTag가 Vue에 등록된 태그라고 인식하고 찾기 시작할텐데요 ... 실제로 VueJS의 목적으로 생성한 태그가 아니므로 찾을 수 없어 에러가 나타날 것입니다. 이를 방지하기 위해서 config를 설정하는 방법...
모듈과 컴포넌트는 매우 중요한 개념이며 최근의 개발 디자인 패턴을 따르기 위해 반드시 이해해야만 합니다. 이 둘은 매우 비슷하지만 같지 않기 때문에 잘못 이해할 경우 혼동을 줄 수 있습니다.모듈과 컴포넌트의 공통적인 부분은 어떤 서비스의 공통화를 하기 위한 목적을 가지며 하나의 단위로 구분될 수 있습니다. 여기서 모듈은 개별 단위가 동작할 수 있는 기본 단위가 될 수 있다는 점이라면 컴포넌트의 경우 하나의 기능 역시 컴포넌트 단위로 나뉠 수 있습니다. 이런 이유로 모듈과 컴포넌트는 1:1 이 될 수도 있지만 1대 다가 될 수도 있습니다. # 모듈의 ...
웹 환경에서 일하다 보면 흔히 들을 수 있는 용어가 컴포넌트(Component)이다. 컴포넌트는 무엇을 의미하고 어떻게 다른지 알아보고자 한다.# 컴포넌트란?컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다.이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다.웹사이트를 구축할 경우 모든 것을 새로 ...