Component
-
[Vue.js] 컴포넌트(Component), Props & EventFront-End(Web)/Vue 2021. 5. 26. 21:04
이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..
-
[React.js] Stateful vs Stateless ComponentsFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 29. 19:21
🤷 Component의 다른 분류방법 우리는 컴포넌트의 형식에 따라, 클래스형 컴포넌트 & 함수형 컴포넌트로 분류해서 공부했다. 이 둘의 가장 큰 차이는, 구문형식과 더불어 state의 사용가능 여부에 있었다. (클래스는 가능, 함수는 불가) 이러한 단점의 보완을 위해, 함수형 컴포넌트에는 Hooks 기능이 추가되었다. 반대로, 클래스형 컴포넌트라고 해서 반드시 state를 가지고 있는 것은 아니다. 이에 따라, 컴포넌트를 stateful / stateless 두 종류로도 나누는 것 같다. 이에 대해 공부해보았다. 📒 Stateless & Stateful Component Stateless 컴포넌트(Child)와 Stateful 컴포넌트(Parent)를 클래스형으로 각각 코드해보았다. //📂Child.j..
-
[React.js] Component 기본Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 24. 20:54
🤷 Component(컴포넌트)의 이해 React 프로젝트의 UI를 독립적이고 재사용이 가능하도록 나눈 최소 단위를 Component라고 한다. (반복적인 패턴구현 용이) Javascript 함수와 유사하다. 'props'라는 입력을 받은 뒤, React element를 반환한다고 이해하자. * 컴포넌트는 단순한 템플릿이 아님! - 주어진 데이터를 반영한 UI를 구성하며, Lifecycle API로 켤 때, 변할 때, 꺼질 때 각각 구현도 가능! - UI / UX 개념과 차이점 UI(User Interface): 사용자가 App을 사용할 때 마주하는 디자인, 레이아웃, 인터페이스 등 기술적인 부분을 얘기한다. 단순히, 보여지는 화면만을 얘기하는게 아니라, 폰트/칼라/줄간격 같은 세부요소 및 반응형/애니메..