React 구성 요소의 상태가 업데이트될 때 한 번만 실행되는 코드

Question

<p>제 게임 프로젝트에는 상태를 업데이트하는 변수가 있는 index.tsx라는 반응 구성 요소가 있습니다. 이 구성 요소는 사용자의 잔고가 변경될 때마다 구성 요소가 새로 고쳐진다고 가정합니다. </p><p> 저는 게임을 시작할 때 사용자의 잔액을 참조 값으로 저장한 다음 해당 참조 값에서 각 거래에 대한 덧셈과 뺄셈만 수행해야 하는 "순 포지션" 기능을 만들고 있습니다. </p><p> 사용자가 처음에(footerBalance 변수에) $5000의 잔액을 가지고 있다고 가정하면 Net Position 라벨은 $5000를 기본으로 하여 해당 값을 0(netPositionBalance 변수에)으로 표시합니다. 이제 사용자는 다음 게임에서 $100를 획득하고 잔액은 $5100(footerBalance 변수에서)가 되며 순 포지션은 $100(netPositionBalance 변수에서)가 됩니다. </p><p> 이제 잔액이 업데이트되면 내 순포지션 금액도 업데이트되고 동일한 구성 요소 파일에 있으므로 순포지션이 0이 됩니다. </p><p>이 문제가 처음에 수정되어 구성 요소가 어떻게 새로 고쳐지더라도 이 특정 코드가 다시 렌더링되지 않기를 바랍니다.

<p>잔액을 얻기 위한 코드 블록은 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">const footerBalance = useAppSelector(state => state.app.footerUnformattedBalance); //이렇게 하면 잔액이 변경됩니다. 즉, $100를 획득하면 $5000가 지급됩니다. , $5100</pre> <p>다음과 비슷하게 시작점에서 순 위치(netPositionBalance 변수에 있음)를 표시하려면 footerBalanceAtStart라는 변수가 필요합니다. </p> <pre class="brush:php;toolbar:false;">let netPositionBalance = Number(footerBalanceAtStart) - Number(footerBalance) //게임 중에 $100로 업데이트되어야 합니다</pre> <p>한 번만 잔액을 얻은 다음 프로젝트 전체 기간 동안 일정하게 유지되도록 "footerBalanceAtStart"를 정의하고 싶습니다. </p>

Answer 1

그래서 답을 찾았습니다. 분명히 여기에서도 다음과 같이 useEffect를 사용할 수 있습니다.

으아악

이제 값은 한 번만 저장되며 상태 업데이트 기능 없이는 자동으로 변경되지 않습니다. setAny()