TIL - 19.12.24

노요셉·2019년 12월 24일
0

componentDidUpdate

자식컴포넌트에서 부모컴포넌트의 상태값을 변경하였습니다.
props로 부모의 state를 업데이트할 메서드를 내려줘서 가능했는데요.

부모의 state가 변경될때마다 이와 관련된 state들도 변경되어야 했기 때문에
componentDidUpdate 메서드에서 prevState와 현재 state를 비교해서 다를때만 관련된 state를 업데이트 해줬습니다.

async componentDidUpdate(prevProps, prevState) {
    // Typical usage (don't forget to compare props):
    const { list, listSize, page, range, rangeSize } = this.state;

    if (range !== prevState.range) {
      const listCnt = await fetchListCnt();

      const pageCnt = Math.ceil(listCnt / listSize);
      const startPage = (range - 1) * rangeSize + 1;
      const endPage = range * rangeSize;
      const startList = (page - 1) * listSize;
      this.setState({
        endPage,
        pageCnt,
        listCnt,
        startList,
        startPage,
      });
    }
  }

https://stackoverflow.com/questions/30528348/setstate-inside-of-componentdidupdate

constructor에서는 fetch 하지말라네요.

https://stackoverflow.com/questions/55182526/fetching-data-in-constructor

react/no-did-update-set-state

이거 eslint에러인데, 이 에러가 나든 난 쓰고 싶어요.
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md

profile
서로 아는 것들을 공유해요~

0개의 댓글