Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sonsurim/vanilla-component
바닐라 타입스크립트로 컴포넌트 패턴의 상태 기반 렌더링 방식 구현하기 😊
https://github.com/sonsurim/vanilla-component
component react vanilla-javascript vanilla-typescript vue
Last synced: 24 days ago
JSON representation
바닐라 타입스크립트로 컴포넌트 패턴의 상태 기반 렌더링 방식 구현하기 😊
- Host: GitHub
- URL: https://github.com/sonsurim/vanilla-component
- Owner: sonsurim
- Created: 2022-04-11T12:47:38.000Z (over 2 years ago)
- Default Branch: devel
- Last Pushed: 2022-05-16T07:59:28.000Z (over 2 years ago)
- Last Synced: 2023-07-20T18:44:32.456Z (over 1 year ago)
- Topics: component, react, vanilla-javascript, vanilla-typescript, vue
- Language: TypeScript
- Homepage:
- Size: 609 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vanilla-Component
바닐라 타입스크립트로 컴포넌트 패턴의 상태 기반 렌더링 방식 구현하기 😊
## 관련 포스팅 📚
- [바닐라로 상태 기반 렌더링 컴포넌트 만들기 1 - 왜 상태 기반 렌더링을 하게 됐을까?](https://velog.io/@surim014/vanilla1)
- [바닐라로 상태 기반 렌더링 컴포넌트 만들기 2 - 상태 기반 렌더링은 어떻게 하는걸까?](https://velog.io/@surim014/vanilla2)
- [바닐라로 상태 기반 렌더링 컴포넌트 만들기 3 - 환경 설정하기 (feat. 보일러 플레이트)](https://velog.io/@surim014/vanilla3)
- [바닐라로 상태 기반 렌더링 컴포넌트 만들기 4 - 코어 컴포넌트 만들기](https://velog.io/@surim014/vanilla4)
- [바닐라로 상태 기반 렌더링 컴포넌트 만들기 5 - 코어 컴포넌트 사용해보기](https://velog.io/@surim014/vanilla5)
## 프로젝트 실행 방법 🦾
```
npm install
npm run dev
```
## Core Component 활용 예시 화면🎬
## Component Life Cycle ♻️
## Component 컨셉 🧐
- Observer 패턴의 구독, 알림 형태를 차용하여 **부모의 상태를 구독한 컴포넌트만 부모 컴포넌트의 상태를 추적합니다.**
- `preventRenderStateKey`에 있는 state key가 변경이 되는 경우, **현재 컴포넌트는 상태만 변경이 되고 렌더링은 진행되지 않습니다.**
## Core Component Data 🔧
- **`node`**: 컴포넌트의 node
- **`initalState`**: 컴포넌트 상태의 초기값
- **`preventRenderStateKey`**: 구독중인 컴포넌트의 상태 변경 시, 내부적으로 상태만 업데이트 후 자식 컴포넌트만 렌더링하기 위한 key
- **`needRender`**: 컴포넌트의 상태 변경에 따른 렌더링 여부
- **`needUpdate`**: 컴포넌트의 상태 변경에 따른 setState 여부
- **`subscribers`**: 컴포넌트 상태 변경 시, 상태가 같이 변경될 하위 컴포넌트
## Core Component Method 🔧
- **`template()`**: 컴포넌트의 markup을 반환하는 메서드
- **`init()`**: 렌더링 전, 내부적으로 사용될 변수, 함수 정의 또는 초기 데이터를 받아올 때 사용되는 라이프사이클 메서드
- **`fetch()`**: 초기 렌더링 이후 컴포넌트의 fetching이 필요할 때 실행되는 라이프 사이클 메서드
- **`render()`**: 빈 태그를 컴포넌트의 markup으로 변환, 이벤트를 바인딩, 하위 컴포넌트를 부착을 하는 라이프 사이클 메서드
- **`update()`**: 상태 변경 시, 렌더링을 위한 라이프사이클 메서드
- **`updateChildren()`**: 상태 변경 시, 하위 컴포넌트의 렌더링을 위한 라이프 사이클 메서드
- **`attachChildComponent()`**: 하위 컴포넌트를 상위 컴포넌트의 template과 연결하는 라이프 사이클 메서드
- **`subscribe()`**: 상위 컴포넌트에 구독을 하는 메서드
- **`validationState`**: 컴포넌트의 상태 변경 시, 현재 컴포넌트가 가지고 있는 상태인지 판별하는 메서드
- **`setState()`**: 컴포넌트의 상태 변경 시, 컴포넌트의 상태를 업데이트, 하위 컴포넌트들에게 알리는 메서드
- **`notify()`**: 상위 컴포넌트로부터 받은 새로운 상태로 하위 컴포넌트들의 setState(), render()하게 해주는 메소드
- **`setEvent()`**: 컴포넌트의 node에 이벤트를 바인딩하는 라이프 사이클 메서드
- **`clearEvent()`**: 컴포넌트의 node에 바인딩되어 있는 이벤트를 지우는 라이프 사이클 메서드