[TIL] 0317

WaffleCard Refactoring

CardList Animation

카드 너비나 갯수가 달라질 때도 속도가 유지되도록 해야하는데
그러려면 targetDom의 scrollWidth가 달라질 때마다 useInterval이 재실행되야한다
(delay가 달라지니까)
scrollWidth을 useInterval의 타이머 실행 의존성으로 걸어줬지만 문제가 해결되지 않음...

Vanilla JS

쇼핑몰 앱을 리팩토링 했다.

비동기 로직 완료 전 렌더링 문제 해결

문제점
기존에 비동기로 서버 데이터를 가져올 때
데이터가 다 불러지기 전에는 아무것도 렌더링되지 않게 구현했었는데
사용성 측면에서 좋지 않을 것 같았다.

해결책

• 첫 렌더링 시 state에 서버에서 불려질 데이터 모델대로 객체를 선언하는데 값은 빈 값으로 둔다
• 빈 값으로 렌더링을 한 번 한다
• fetch함수를 실행하는데, 서버에서 값을 불러온 후 setState룰 실행하는 로직이 담겨있다.
  (템플릿 컴포넌트에 fetch함수 추가함)

이런 방법이면 서버 데이터가 불려지기 전에도 돔 렌더링을 먼저 할 수 있고, 원하는 디폴트 값을 넣어 사용할 수 있다.
리액트와 같은 방식이다.

export default class ProductDetailPage extends Component {
  $selectedOptions;
  $select;

  setup() {
    this.state = {
      productData: {
        productId: '',
        productName: '',
        productPrice: '',
        imageUrl: '',
        productOptions: [],
      },
      selectedOption: {
        optionId: '',
        optionStock: 0,
        optionName: '',
        optionPrice: 0,
        count: 0,
      },
    };
  }

  async fetch() {
    const res = await request(`/products/${this.props.id}`);

    this.setState({
      productData: {
        ...res,
        productId: res.id,
        productName: res.name,
        productPrice: res.price,
      },
    });
  }

자식 부분 렌더링의 조건

자식 부분 렌더링이 가능하려면 이벤트 발생 시 직속 부모의 상태에만 영향을 줘야한다.
조상의 상태를 변경할 경우 직속 부모까지 전부 렌더링되기 때문이다.

이 문제 때문에 엄청난 삽질을 했다..