React 상태에서 Set 데이터 구조 사용

React 상태에서 Set 데이터 구조 사용

ES6를 사용할 수 있습니까?Set데이터 구조를 선택할 수 있습니까?

예를 들어 체크리스트가 다른 항목으로 구성되어 있고 각 항목의 체크 상태를 유지하고 싶은 경우.나는 이렇게 쓰고 싶다.

export default class Checklist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Set()
    }
  }

  addItem(item) {
    //...?
  }

  removeItem(item) {
    //...?
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

세트는 원래 변동성이 있고 React는 컴포넌트를 갱신할 때 얄팍한 비교를 하기 때문에 불변의 오브젝트가 통과되어 그 상태로 유지되는 것을 기대하고 있습니다.단, Set 오브젝트를 스테이트로 유지하고 유지하는 방법은 있습니까?

react는 상태 속성이 교체되고 상태 속성이 변환되지 않은 경우에만 상태 변경을 식별하므로(비교 표시) 이전 집합에서 새 집합을 만들고 변경 사항을 적용해야 합니다.

이것은 다음부터 가능합니다.new Set(oldSet) !== oldSet.

const oldSet = new Set([1, 2]);
const newSet = new Set(oldSet);

console.log(oldSet === newSet);

---

Set in class 구성 요소를 사용하는 방법:

export default class Checklist extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Set()
    }
    
    this.addItem = this.addItem.bind(this);
    this.removeItem = this.removeItem.bind(this);
  }

  addItem(item) {
    this.setState(({ checkedItems }) => ({
      checkedItems: new Set(checkedItems).add(item)
    }));
  }

  removeItem(item) {
    this.setState(({ checkedItems }) => {
      const newChecked = new Set(checkedItems);
      newChecked.delete(item);
      
      return {
       checkedItems: newChecked
      };
    });
  }

  getItemCheckedStatus(item) {
    return this.state.checkedItems.has(item);
  }

  // More code...
}

---

에서 세트를 사용하는 방법useState()갈고리를 채우다

이 예에서는 1~5 사이의 랜덤 정수를 추가한 다음 동일한 범위의 랜덤 수를 제거합니다.

const { useState } = React;

const Comp = () => {
  const [state, setState] = useState(() => new Set());

  const addItem = item => {
    setState(prev => new Set(prev).add(item));
  }

  const removeItem = item => {
    setState(prev => {
      const next = new Set(prev);

      next.delete(item);

      return next;
    });
  }

  return (
    <div>
      <button onClick={() => addItem(Math.ceil(Math.random() * 5))}>Add</button>
      <button onClick={() => removeItem(Math.ceil(Math.random() * 5))}>Remove</button>
      <div>
        {Array.from(state)}
      </div>
    </div>
  );
}

ReactDOM
  .createRoot(root)
  .render(<Comp />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>

state그냥 흔한 물건일 뿐이지 원하는 걸 다 담을 수 있어다음 파일을 덮어쓸 수 있습니다.shouldComponentUpdate라이프 사이클 방법을 직접 도입할 수 있습니다.독자적인 논리를 사용하여 컴포넌트의 갱신이 필요한지 여부를 확인할 수 있습니다.세트를 네스트할 필요도 없습니다.그냥 직접 설정만 하면 됩니다.state:

this.state = new Set();

언급URL : https://stackoverflow.com/questions/44482788/using-a-set-data-structure-in-reacts-state