집 >웹 프론트엔드 >JS 튜토리얼 >React useState()에서 객체 값 처리하기

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

Handling Object Values in React useState()

React에서 useState란 무엇인가요?

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

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

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

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

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

스택은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：