여러 상태의 React에서 불필요한 렌더링 방지

상태를 사용하여 인터페이스의 다양한 부분을 제어하는 ​​것이 일반적입니다. 그러나 잘 관리하지 않으면 여러 상태로 인해 불필요한 재렌더링이 발생하여 시스템 성능에 영향을 줄 수 있습니다.

문제: 상태가 너무 많음 === 다시 렌더링이 너무 많음

사용자의 데이터를 관리하는 구성요소가 있다고 가정해 보겠습니다. 다음과 같이 이러한 상태를 독립적으로 선언할 수 있습니다.

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

여기에는 6개의 독립 상태가 있습니다. 이 상태 중 하나가 업데이트될 때마다 전체 구성 요소가 다시 렌더링됩니다. 이제 6개 상태를 업데이트해야 한다고 상상해 보세요... 예, 렌더링합니다. 이 구성요소는 6번입니다.

해결책: 사용자 정보에 대한 상태를 1개만 생성

이 문제를 완화하는 한 가지 방법은 모든 상태를 단일 개체로 통합하는 것입니다. 별도의 상태를 갖는 대신 모든 사용자 정보를 하나의 상태로 유지할 수 있습니다.

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

이제 각 상태에 대한 함수 대신 원하는 변경 사항만 수신하고 확산 연산자(...)를 사용하여 이전 상태와 결합하는 updateUser 함수가 있습니다. 이를 통해 상태의 일부만 업데이트하고 나머지는 변경되지 않은 상태로 유지할 수 있습니다.

개체에 대한 단 하나의 정보만 변경하려면 다음을 수행하세요.

setUser((prevState) => ({...prevState, age: 25}))

차이점

별도의 상태를 사용하는 경우 각 개별 상태 변경으로 인해 구성 요소가 다시 렌더링됩니다. 모든 상태를 단일 개체로 통합하면 여전히 단일 재렌더링이 발생하지만 개체의 여러 부분이 변경되더라도 한 번만 발생합니다.

장점

- 재렌더링 감소: 상태를 통합함으로써 불필요한 여러 번의 재렌더링을 방지하여 성능을 향상시킵니다.
- 더욱 쉬워진 유지 관리: 단일 상태에서 사용자 정보를 관리하는 것이 더 쉬워져 코드가 단순화되고 가독성이 높아집니다.
- 부분적으로 제어되는 업데이트: 나머지 부분은 건드리지 않고 수정해야 하는 상태 부분만 변경할 수 있습니다.

그렇습니다! 도움이 되었기를 바랍니다!!!
아직 개발 중이지만 제 포트폴리오는 여기 있습니다: https://lucaslima.vercel.app (액세스하시면 준비가 되었으면 좋겠습니다 하하하)

성공! ?

위 내용은 여러 상태의 React에서 불필요한 렌더링 방지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!