Vanilla Javascript로 웹 컴포넌트 만들기

컴포넌트와 상태관리

---

[ 상태관리의 탄생 ]

 jQuery는 Dom을 쉽게 조작할 수 있도록 만들어주고 크로스 브라우징과 관련된 이슈를 해결해 주었다.
브라우저와 JavaScript의 발전으로 브라우저 단에서 렌더링을 하고, 서버에서는 REST API 혹은 GraphQL같이 브라우저 렌더링에 필요한 데이터만 제공하는 형태로 기술이 변화했다.

그로인해, 직접적으로 DOM 을 다루는 행위가 급격하게 감소하였고, 상태(state)를 기준으로 DOM을 렌더링 하는 형태로 발전하였다.
즉, State가 변하지 않는다면 DOM 이 변하면 안되는 것이다.

여기서 CSR이라는 개념과 상태관리 개념이 생기게 되었다.

SSR(Server-Side Rendering)

- 서버에서 HTML을 만들어서 클라이언트에 넘겨주는 것
- 클라이언트에서 데이터를 깊은 단계까지 관리할 필요가 없다.

CSR(Client-Side Rendering)

- 클라이언트단에서 렌더링을 하기 위해서 렌더링에 필요한 상태를 정교하게 관리할 필요가 있다.
- 이로인해 Redux와 같은 상태관리 라이브러리가 생겨났다.

 

 

state - setState - render

---

state 기반 view 를 꾸며준다.
state가 바뀌면(setState)
render를 진행해준다.

 

이벤트 처리

---

render가 실행할 때 마다 이벤트가 새로 등록된다.
반복적인 요소에 대해 각각 이벤트를 등록해야 한다.

=> 이벤트 버블링

classList.contains를 사용하여 이벤트 버블링을 진행한다면 직관적으로 처리할 수 있다.

 

구현

---

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/dc25e0a82275ec321bed4c942fc11550f6736d1f

Feat : index.html , basic settting · jin-Pro/JavaScript-Component-CSR@dc25e0a

 

- 기본 틀 세팅
- state 변경되면 render 실행
- state 는 오직 setState로만 변경한다.

---

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/61ac177fa75402ad0f2da4af239b8af8cf88c3cb

Refactoring : make js module · jin-Pro/JavaScript-Component-CSR@61ac177

- script 내부 로직들을 class로 변경하여 모듈화함
- app.js / items.js / component.js

---

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/897e2e433a6b53865d85326d5eba32caa9b013da

Update : Event In Items · jin-Pro/JavaScript-Component-CSR@897e2e4

 

- render 발생 할 때 마다 이벤트가 새로 등록된다.
- 반복적인 요소에 대해 각각 이벤트 등록
- 코드가 효과적이지 않다.

---

 

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/1b7bf8f999ce7ad4a3f4b87755305e7ddd6fb9d4

Refactoring : Event Bubbling · jin-Pro/JavaScript-Component-CSR@1b7bf8f

 

- 반복적인 이벤트 등록을 이벤트 버블링을 사용하여 효과적으로 처리함.

---

 

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/5753b1cbe7e57660a7131050f7d7585856359738

Refactoring : Create addEvnet In Component.js · jin-Pro/JavaScript-Component-CSR@5753b1c

- 이벤트 버블링 과정을 addEvent 메서드를 생성하여 setEvent 메서드를 깔끔하게 처리해주었다.

 

---

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/954e2ddc7561fda5b18f5a369986fbed4a87bd12

Update : Items Fn => filter, toggle · jin-Pro/JavaScript-Component-CSR@954e2dd

 

- Item 컴포넌트에 toggle, filter 등의 기능을 추가한다.
- Item 컴포넌트에 기능이 너무 많아져 관리하기 힘들다.
- 컴포넌트라는 역할 즉, 재사용이 불가능해진다.

---

https://github.com/jin-Pro/JavaScript-Component-CSR/commit/bd4ff4d1666d2692b35c74e4f8c29aa9b8f99292

Refactoring : Item => ItemAppender,ItemFilter,Item · jin-Pro/JavaScript-Component-CSR@bd4ff4d

 

- component.js 를 수정하여 render 후 mount 작업 진행, 상위 컴포넌트에서 하위 컴포넌트로 props 전송
- 기존 Item의 로직을 App 에서 관리를 함
- App에서 Items, ItemAppender, ItemFilter 에 로직을 props로 전달해줌

 

---

├── index.html
└── app.js
└── Component.js
└── main.js
└── components
        ├── ItemAppender.js
        ├── ItemFilter.js
        └── Items.js

 

학습 출처 : https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%8E%E1%85%AE%E1%84%80%E1%85%A1

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일