[TIL] 0516

바닐라 js과제 연습 - 기존의 베이스 컴포넌트의 구조로는 부모 상태 중 일부만 사용하는 컴포넌트를 선택적으로 리렌더링 시킬 수 없었다.

  // 이 경우 두 개의 상태 중 하나만 변경되어도 모든 자식 컴포넌트가 리렌더링 되는 문제점이 있음
  childUpdate() {
    const { searchData, selectedWords } = this.state;
    this.WordList.setState({ data: searchData });
    this.SelectedList.setState({
      items: this.limitFiveLength(selectedWords),
    });
  }

상태 각각을 구독할 수 있는 패턴을 찾아보았으나, prop으로 넘겨받으면 안되고 직접 가져다가 써야했다(import하거나 등등..)
prop으로 넘겨받게되면 해당 상태를 직접적으로 쓰는게 아닌 변수 복사되기 때문인 것 같다.

결국은 각 컴포넌트에서 현재 가진 state와(props으로 넘겨받은) setState를 통해 새로 들어온 state를 비교해서 다를 경우만 상태 변경+리렌더링되도록 메소드를 추가했다.

checkNeedRender(newState) {
    let needRender = false;
    const updateStateKey = Object.keys(newState);

    updateStateKey.map((key) => {
      if (
        !(JSON.stringify(this.state[key]) === JSON.stringify(newState[key]))
      ) {
        needRender = true;
      }
    });

    return needRender;
  }

  setState(newState, childUpdate = false) {
    const needRender = this.checkNeedRender(newState);
    if (!needRender) return;

    this.state = { ...this.state, ...newState };
    childUpdate ? this.childUpdate() : this.render();
  }