note

  • 홈
  • 태그
  • 방명록

renderless component 1

vuejs Renderless Component 패턴 이해하기

Renderless Component란?Renderless Component는 Vue.js에서 컴포넌트의 로직과 표현을 분리하는 패턴이다. 이 패턴은 컴포넌트의 기능을 캡슐화하면서도 시각적인 표현은 제한하지 않는다.. 즉, Renderless Component는 로직과 동작에만 집중하고, 실제 렌더링은 부모 컴포넌트에 맡기는 방식이다.실제 예제로 이해Toggle 컴포넌트 만들기애플리케이션의 여러 부분에서 사용될 수 있는 토글 UI 요소를 생각해보기. 어떤 토글은 버튼으로, 다른 토글은 체크박스나 스위치로 표시될 수 있다.먼저 기본적인 renderless 토글 컴포넌트를 만들어보면 다음과 같다:  이제 이 renderless 컴포넌트를 사용하여 세 가지 다른 스타일의 토글을 만들어보면 다음과 같다: ..

프로그래밍/Vue.js 2024.12.20
이전
1
다음
더보기
반응형
프로필사진

note

え?

  • 분류전체보기 (235)
    • 프로그래밍 (217)
      • Vue.js (15)
      • React (0)
      • React Native (3)
      • TypeScript (1)
      • JavaScipt (37)
      • Node.js (6)
      • jQuery (44)
      • HTML+CSS (23)
      • SWIFT (1)
      • MSSQL (20)
      • ASP (24)
      • ASP.NET (0)
      • PHP (14)
      • JAVA (6)
      • GIT (2)
      • 기타 (21)
    • 페이스북 (9)
    • 크레이지아케이드 (9)

Tag

페이스북 연동, 크아, javascript datediff, 페이스북 앱, vue 국제화, ios 앱푸시, ios fcm background, vuejs render function, ios fcm foreground, facebook APP, 모바일 상단고정, facebook share link, facebook api, crazyarcade, jquery, renderless component, vue-i18n, vue3 i18n, 페이스북 api, jquery touch slider,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

Archives

Calendar

«   2026/03   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

방문자수Total

  • Today :
  • Yesterday :
03-31 21:41

Copyright © AXZ Corp. All rights reserved.

티스토리툴바