logo

Tagged template literals component

* 관련 기술 스택이 없습니다
emoji

• Tagged template literals를 사용하여 컴포넌트를 만드는 방법을 소개하였다. 이를 통해 styled-component와 같이 템플릿 리터럴 내부에 변수로 컴포넌트를 넣어 사용할 수 있다.
• 상태값을 생성하거나 전역 상태로 사용할 수 있도록 singleton 패턴을 적용하였으며, 의존성을 가진 컴포넌트를 setDependents 함수를 통해 받아와 값이 변할 때마다 render되도록 구현하였다.
• 페이지 컴포넌트 사용법은 각 컴포넌트를 불러와서 해당 위치에 넣어주는 것이며, 컴포넌트에 컴포넌트를 중첩하거나 원하는 문자를 넣어줄 수 있다. 상태값은 PageData에서 관리하며, 상태값이 바뀔 때 render될 수 있는 컴포넌트들을 넣어준다.
• 개선할 점으로는 컴포넌트 별로 스타일 추가, 차후에 shadowDOM과 함께 적용, 보일러 플레이트 줄이는 방향으로 개선 필요, 컴포넌트, 비즈니스 로직, 상태값 상호 의존 해결 등이 있다.

thumbnail
북마크
공유하기
신고하기
4분 분량
조회수 53
profile-imagemeerkat
일 년 전
Copyright © 2025. Codenary All Rights Reserved.