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

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

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

const UserComponent = () => { const [이름, setName] = useState(''); const [나이, setAge] = useState(0); const [주소, setAddress] = useState(''); const [이메일, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [occupation, setOccupation] = useState(''); // 상태 업데이트 함수 const updateName = (newName) => setName(newName); const updateAge = (newAge) => setAge(newAge); // 등등... 반품 ( ... ); };

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 [사용자, setUser] = useState({ 이름: '', 나이: 0, 주소: '', 이메일: '', 핸드폰: '', 직업: '' }); // 사용자의 상태를 업데이트하는 함수 const updateUser = (newData) => { setUser((prevState) => ({ ...이전사용자, ...새로운데이터, })); }; 반품 ( ... ); };

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 (
    ...
  );
};

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

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

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

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 (
    ...
  );
};

차이점

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

장점

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

그리고 그거! 도움이 되었기를 바랍니다!!!

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

성공! ?