[TIL] 0523

Vanilla TS project

베이스 컴포넌트 리팩토링 - state와 props을 따로 관리해야하는가?
컴포넌트를 생성하는 지점에서 초기 상태가 정해지기 때문에 컴포넌트 내부에서 어떤 상태를 추가하거나 어떤 상태를 가졌는지 확인하기 불편하다.

또한 부모에게 받는 데이터와 컴포넌트 내부에서 쓰는 상태가 무조건 같다고 하는 게 적합하지 않다고 느꼈다. isLoading과 같은 상태는 생성할 때 만들어지지 않아도 되기 때문에

부모에게 전달받을 데이터만 컴포넌트 생성 시 받아오고, 내부에서 쓸 상태는 컴포넌트 내부에서 따로 지정해준다.(매번 undefined제외 로직을 작성해주어야하는 불편함을 감수)

또한 어떤 인자를 받는 지 명확하게 해주기 위해 파라미터를 객체의 형태로 변경했다.

// 베이스 컴포넌트 변경
$node: Element;
  props: PropsType;
  state: StateType | undefined;
  constructor({ $node, props }: { $node: Element; props: PropsType }) {
    this.$node = $node;
    this.props = props;
    this.setup();
    this.fetch();
    this.render();
    this.setEvent();
  }

나머지 수직 영역 채우기

flex를 이용해서 나머지 수직 영역을 채우려면 부모 요소에 height: 100vh를 해줘야한다.

무한 스크롤 더 이상 데이터가 없을 때를 판단해 fetch막는 방법

문제 상황
기존의 타겟과 마지막 요소가 같은 경우라도 제거하고 다시 등록했기 때문에 이미 보여짐 → 타겟 새로 등록 → 보여짐 → 또 실행 의 무한 굴레에 갇혔다.

해결책

• 데이터의 총 갯수에 대한 정보를 얻을 수 없어 총 갯수와 현재 상태의 갯수를 비교하는 방법을 사용할 수 없었다.
• 마지막 데이터의 id를 넘어서는 요청이 들어오면 그냥 가장 끝의 범위의 데이터들을 계속 보내준다(중복됨)
• 데이터가 중복되어서 들어오지만 아이템 요소는 중복된 것이 만들어지지 않기 때문에 마지막 요소가 변하지 않는다.
• 기존의 타겟과 현재의 마지막 요소가 같은 돔이라면 타겟을 등록해주지 않는다.
  (더 이상 콜백함수를 실행시켜 데이터를 부르지 않는다.)
  intersecion observer에 등록한 콜백은 등록된 타깃이 화면에 처음 보일 때 실행되고,
  타겟이 재등록될 때마다 실행되기 때문