setState의 효율적인 사용 방법과 React-Query의 initialData, placeholderData

useState

const [userInfo, setUserInfo] = useState()

const onChangeUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
  setUserInfo({ ...userInfo, username: e.target.value });
};

userInfo가 속성이 많은 큰 객체인 경우 스프레드 연산자를 사용하면 전체 객체의 얕은 복사본을 만들 수 있으며 이는 메모리 사용량 및 처리 시간 측면에서 성능에 악영향을 끼칠 수 있다.

 

따라서 다음과 같이 사용하는 것이 좋다.

  const onChangeUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserInfo((prevUserInfo) => ({ ...prevUserInfo, username: e.target.value }));
  };

 

일반적으로 콜백 함수를 이용한 업데이트 방식을 사용하는 것이 이전 상태를 기반으로 상태를 업데이트할 때 더 안전한 접근 방식으로 간주된다. 짧은 시간 내에 여러 상태 업데이트가 발생하더라도 최신 상태로 작업하고 있음을 보장할 수 있기 때문이다.

 

 

결론적으로 작은 상태 개체를 처리하고 이전 상태에 의존할 필요가 없다고 확신하는 경우 첫 번째 방식을 사용할 수 있다.

하지만 항상 최신 상태로 작업하고, 더 복잡한 상태 업데이트가 예상되는 경우 함수 형식을 사용하는 두 번째 접근 방식이 더 유용하다.

 

initialData, placeholderData

react query에서는 사용자에게 로딩 스피너를 보여주는 것보다, 유저에게 더 좋은 경험을 줄 수 있는 여러 방법을 제공한다.

그중 initialData를 제공하는 방식과 placeHolder를 제공하는 방식이 있다.

 

initialData

initialData의 값을 설정해 줄 경우 실제 api를 통해 받아온 데이터처럼 행동하게 해 준다.

설정해 준 값은 즉시 캐싱되고, staleTime이 지날 경우 refetch 할 수 있다.

 

placeholderData

api와 관련 없는 가짜 데이터로, 실제 데이터를 가져오는 동안 데이터를 표시할 수 있도록 해준다.

캐싱되지 않고, 실제 데이터를 가져오는 동안 유지된다.

 

 

Reference

https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query

Placeholder and Initial Data in React Query