용어 사전 coding 용어 페이지

렌더 함수

상태를 뷰로 변환하되 부수 효과가 없는 함수

render-function #ui#javascript

English version

다른 이름

렌더 헬퍼뷰 함수

관련 개념

패턴 카탈로그 부분 갱신 DocumentFragment

핵심 아이디어

렌더 함수는 같은 입력이면 항상 같은 출력을 내고, 상태를 직접 수정하지 않습니다. 이렇게 순수성을 지키면 테스트가 쉬워지고, 여러 패턴에서 재사용하기도 편합니다.

이 블로그에서의 역할

Mathbong의 UI 시리즈는 모든 패턴을 패턴 카탈로그에 등록된 렌더 함수로 정의합니다. 그 덕분에 부분 갱신, 오류 상태, 접근성 속성을 같은 구조로 설명할 수 있습니다.

이 개념을 다루는 글

[JavaScript 시리즈 14편] 재사용 가능한 UI 패턴과 렌더 함수 설계 반복되는 DOM 조작을 줄이는 렌더 함수, 상태-뷰 분리, 패턴 카탈로그 작성을 다룹니다.[JavaScript Series 14] Design reusable UI patterns and render functions Cut repeated DOM work by creating render helpers, keeping your data separate from how it looks, and organizing common UI patterns.[JavaScript 시리즈 7편] 미니 프로젝트로 상태와 렌더링 감각 잡기 순수 JavaScript로 상태 관리, 렌더 함수, DOM 업데이트 구조를 설계해보며 컴포넌트 사고방식을 익힙니다.