구현 계획

전체 설계

• SPA 형태 하나의 Web App을 만들 것
  • 메인 페이지에 프로젝트들의 제목이 적힌 카드 리스트가 나열되어 있고,
    카드를 클릭하면 해당 프로젝트 페이지가 나타나도록 구현할 것
• class를 이용한 컴포넌트 방식으로 구현할 것
• 언어는 TypeScrtipt

---

컴포넌트 설계

공통 컴포넌트 구현

연결될 타겟과 props를 인자로 받는다. this바인딩

선언

export default class Component<T> {
  $target: Element;
  props: T;
  constructor($target: Element, props?: T) {
    this.$target = $target;
    this.props = props;
  }
}

사용
공통 Component를 확장하고 super함수에 targe과 props를 인자를 넣고 실행하면
this.target과 this.props가 자동 생성되어 사용할 수 있다

class ImageSlider extends Component<PropsType> {
  constructor($target: Element, props: PropsType) {
    super($target, props);
  }

컴포넌트 클래스 스키마

export Skima class Component<PropsType> {
  state:StateType
  constructor($target: Element, props: PropsType) {
    super($target, props);
    this.state
  }

  setState(newState) {
    this.state = newState;
    this.render();
  }

  template() {
    return ``;
  }

  render() {
    this.$target.innerHTML = this.template();
    this.mount();
  }

  mount() {} 

  async initialState() {}
}

this.state: 내부에서 사용하는 데이터
this.props: 외부에서 들어온 데이터
this.target: 루트 dom
mount()

• 렌더링 될 때마다 실행될 함수 - 이벤트 바인딩 역할

render()

• template로 작성된 html코드를 target에 연결시켜 화면에 렌더링하고
• 내부에서 mount()를 실행시켜 렌더링된 돔에 이벤트를 바인딩 시킴

setState()

• 현재의 상태를 인지로 들어온 새로운 상태로 재할당해주는 함수
• 상태가 바뀔 때 다시 모든 돔을 다시 렌더링해줘야 한다면 render함수를 실행시킨다

template()

• html코드를 반환하는 함수

eventHandler():

• 이벤트를 정의하는 함수