useState 공식문서 스터디 (4)

App.js

CountLabel.js

첫째로, 렌더링 도중에 상태를 업데이트 할 때는 조건부로 업데이트를 수행해야 한다. 이때 조건은 이전상태 (prevCount)와 새로운 상태 (count)가 다른지를 확인하는 것이다. 이렇게 하면 불필요한 렌더링을 방지할 수 있다. 만약 조건 없이 상태를 업데이트 한다면 렌더링이 무한반복되어 앱이 깨질 수 있다.

 

둘째, 상태를 업데이트 할 때는 상태를 업데이트 하는 함수인 setPrevCount를 호출해야 한다, 이 함수는 이전 상태(precCount)를 새로운 상태 (count)로 업데이트 한다. 이를 통해 리액트는 상태 변경을 추적하고 필요한 경우에만 컴포넌트를 다시 렌더링 한다.

 

셋째, 렌더링 도중에는 현재 렌더링 중인 컴포넌트의 상태만을 업데이트 해야 한다. 다른 컴포넌트의 상태를 업데이트하려고 시도하면 에러가 발생한다. 이는 리액트의 설계원칙중 하나로, 컴포넌트는 자신의 상태만을 관리해야 하며 다른 컴포넌트의 상태를 직접 변경해서는 안된다. 

 

넷째, 상태를 업데이트 할 때에는 여전히 상태를 변경하는 것으로 변이가 아니어야 한다. 리액트에서는 상태를 직접 변경하는 대신에 setState나 useState 훅을 통해 상태를 업데이트 해야 한다. 상태를 직접 변경하면 React가 상태변경을 감지하지 못하고, 불필요한 렌더링이 발생할 수 있다.

 

이 내용은 리액트에서 상태를 업데이트 하는 패턴 중 하나로, 특히 효율적인 렌더링을 위해 사용된다. 

이 방식은 일반적으로 useEffect훅 안에서 상태를 업데이트 할 때 사용된다. useEffect 안에서 상태를 업데이트 하는 것은 비동기 작업을 수행하고 그 결과를 반영할 때 많이 사용된다. 이때 상태를 업데이트 하면 컴포넌트가 다시 렌더링되는데, 이때의 렌더링 도중에 상태를 업데이트 하면 리액트가 추가적인 렌더링을 줄일 수 있다.

 

set함수를 호출한 후에 조건을 검사하여 조건이 만족되지 않으면 더 이상의 렌더링을 진행 하지 않고, 일찍 렌더링을 중단하는 것이 중요하다. 이는 자원을 낭비하지 않고, 불필요한 렌더링을 방지할 수 있다.