[TIL] 0223

TypeScript Project

Vanilla Javascript로 웹 컴포넌트 만들기
이 링크를 참고해 컴포넌트를 리팩토링하려한다

1. state를 의존해 rendering한다 (기존에는 바뀐 돔만 접근해 수정함)

2. 기반이 되는 템플릿component class의 함수를 세분화한다

• setup() : this.state에 값 할당
• setEvent() : this.target에 이벤트 설정
• template() : html템플릿 작성해 반환
• render() : this.target에 template연결
• mounted() : rendering후에 할 작업 실행 (자식 컴포넌트 생성 후 연결)
• setState(newState) : 파라미터로 들어온 값을 this.state에 할당 후 render()실행
• addEvent(eventType, selector, callback) : 이벤트 버블링을 통한 이벤트 등록 함수

3. constructor함수에서 setup(), setEvent(), render() 를 실행한다

   • render함수 실행 시마다 이벤트를 걸어주는 게 아닌
   • 부모 컴포넌트인 this.target에 처음 한번만 걸어주기 위해 (이벤트 버블링 이용)

4. 부모 컴포넌트에서 자식 컴포넌트로 함수(props에 포함)를 전달할 때 bind()함수를 사용해 함수를 복사한 후 this를 재연결 해주는 방법을 사용한다

5. 자식 컴포넌트를 여러 개 연결해야할 때에는 부모컴포넌트의 template에 각 자식 컴포넌트에 매칭될 태그들을 생성한 후 연결한다 (기존에는 appendChild로 구현)
   *리스트의 경우에는 배열data에 map을 돌려서 li생성