2024/12 2

vuejs Render Function 이해하기

Render Function이란?Vue에서는 보통 문법을 사용해서 컴포넌트의 마크업을 구성하지만, render function을 사용해서 직접 컴포넌트를 구축할 수도 있다. Vue는 빌드 시점에 우리가 작성한 템플릿을 render function으로 컴파일하는데, 이를 통해 Virtual DOM을 구성하게 된다.왜 Render Function을 사용할까?일반적인 템플릿 문법으로는 구현하기 어려운 높은 수준의 커스터마이징이나 유연성이 필요할 때 render function을 사용하면 좋다. 주로 다음과 같은 경우에 사용하게 된다:복잡한 로직 기반의 동적 컴포넌트 렌더링이 필요할 때Virtual DOM을 직접 다뤄야 할 때JSX를 사용하고 싶을 때기본 예제로 알아보기간단한 컴포넌트를 render funct..

vuejs Renderless Component 패턴 이해하기

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