[TIL] 0223

yoon Y·2022년 2월 24일
0

2022 - TIL

목록 보기
45/109

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) : 이벤트 버블링을 통한 이벤트 등록 함수
  1. constructor함수에서 setup(), setEvent(), render() 를 실행한다

    • render함수 실행 시마다 이벤트를 걸어주는 게 아닌
    • 부모 컴포넌트인 this.target에 처음 한번만 걸어주기 위해 (이벤트 버블링 이용)
  2. 부모 컴포넌트에서 자식 컴포넌트로 함수(props에 포함)를 전달할 때 bind()함수를 사용해 함수를 복사한 후 this를 재연결 해주는 방법을 사용한다

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

profile
#프론트엔드

0개의 댓글