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

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

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

Archives

Calendar

«   2025/12   »
일 월 화 수 목 금 토
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 :
12-10 03:43

Copyright © Kakao Corp. All rights reserved.

티스토리툴바