React useState()에서 객체 값 처리하기

React에서 useState란 무엇인가요?

useState는 기능적 구성 요소가 로컬 상태를 관리하고 업데이트할 수 있게 해주는 React 후크입니다.

하지만 상태 자체를 직접 변경하는 것이 아니라 useState()를 통해 상태를 업데이트해야 합니다.

useState의 기본 예

const [count, setCount] = useState(0);

setCount(count++)
console.log(count) // 1

useState의 객체 상태 문제

자바스크립트에는 데이터를 저장할 수 있는 위치가 스택과 힙 두 군데가 있는데 이는 원시 값과 참조에 관한 이야기와 관련이 있습니다.

기본 값 및 참조

스택은 Javascript에서 데이터의 크기가 고정된 기본 값(문자열, 숫자, 부울, 정의되지 않음, null)과 같은 정적 데이터를 저장하는 데 사용되며,
힙은 참조(객체 및 함수)와 같은 동적 데이터를 저장하는 데 사용됩니다.

기본 값의 값은 단순히 스택에 저장되는 반면, 참조 내용 자체는 스택에서 참조되는 힙에 저장됩니다.

기존 개체를 참조하는 새로 할당된 값이 동일한 것으로 해석되는 상황이 발생합니다.

잘못된 예를 살펴볼까요?:

const [state, setState] = useState([1,2]);

const temp = state
temp.push(3)
useState(temp)

temp와 state는 모두 힙에서 동일한 값을 참조하므로 사실상 동일합니다. 이는 다시 렌더링을 트리거하려면 새 개체나 값이 필요한 useState 규칙을 위반합니다. ?

어떻게 해결하나요?

⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️⛩️

스프레드 구문

[...[]]

힙에 있는 값의 별도 복사본을 생성하는 데 도움이 됩니다.

const a = [1,2]
const b = a
console.log(Object.is(a,b)) // true

const c = [...a]
console.log(Object.is(a,c)) // false

짜잔?

const [state, setState] = useState([1,2])
const temp = [...state].push(3)
setData(temp);

이제 temp 값은 원래 객체와 다르기 때문에 더 이상 상태와 동일한 참조를 공유하지 않습니다.

또 다른 함정 내부 기능

sort()와 같은 내부 함수는 데이터 구조의 별도 복사본을 생성하지 않고 데이터를 제자리에서 수정합니다.

a = [1,3]
a.sort((b,c) => c-b)
console.log(a) // => [3,1]

보시다시피 a의 값이 변경되었습니다.

또 잘못된 예가 있습니까?:

const [state, setState] = useState([])

const sortOrder = () => {
    state.sort((a, b) => a-b)
    setState(state);
  }

상태가 규칙에 따라 변경되었습니다. ?

여기에 스프레드 구문을 사용한 솔루션이 있습니다.

const [state setState] = useState([])

const sortOrder = () => {
   const newState = [...data].sort((a, b) => a-b)
    setState(newState);
  }

그러나 확산 구문으로 결론을 내리기 전에 문서를 찾아 최신 업데이트를 확인하는 것을 잊지 마세요.

문서 확인

기능이 업데이트될 가능성이 있습니다.

예를 들어 2023년에 입력 데이터의 복사 버전을 반환하는 toSorted()가 새로 도입되었습니다.

const [state, newState] = useState([])

const sortOrder = () => {
   const newState = state.toSorted((a, b) => a-b)
   newState(newState);
  }

AI는 최신 정보를 잘 파악하지 못하기 때문에 이 전통적인 방법론은 여전히 ​​가치가 있습니다!

결론

확산 구문을 사용해 보겠습니다. [...[]]
하지만 문서도 참조하는 것을 잊지 마세요.

참조

https://felixgerschau.com/javascript-memory-management/
https://react.dev/reference/react/useState

위 내용은 React useState()에서 객체 값 처리하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!