React에서 일반 변수 대신 state 훅을 사용해야 하는 이유

 

React에서 전역 상태 관리를 할 때 코드 최적화와 설정 차이로 인한 문제를 해결하기 위해

useState를 사용해야 하는 이유에 대해 알아보겠습니다.

저는 주스탠드를 사용하여 전역 상태 관리를 구현하고 있습니다. 

일반 변수를 사용하여 userType을 저장하여 사용했고, 로컬 환경에서는 별 다른 문제가 발생하지않았습니다. 

하지만 AWS 빌드 후에 userType이 undefined가 되는 문제가 발생했습니다.

 

 

////기존 코드

import { useUserStore } from "src/store/adviceStore";

const { user, fetchUserData } = useUserStore();

//가져온 fetchUserData를 userType변수에 저장
const userType = user?.presentAccount.userType;
 
 
//useEffect훅을 사용해서 fetchUserData 가져오기
 useEffect(() => {
    fetchUserData();
  }, []);

로컬 환경에서는 userType을 활용한 코드들이 정상적으로 동작했지만,

AWS 빌드 후 userType이 undefined인 문제가 발생했습니다.

살펴본 결과 빌드 과정에서의 최적화와 설정 차이로 인해 발생하는 문제 일 수 있다고 합니다.

 

이유를 잠깐 살펴볼까요?

 

최적화: 로컬 개발 환경에서는 보통 코드 최적화를 수행하지 않습니다.

그러나 빌드 과정에서는 코드가 최적화되고, 특히 Create React App, Next.js 등의 도구를 사용하면 

Tree Shaking과 같은 최적화 기법이 적용됩니다. 이 최적화 과정에서 코드의 동작이 달라질 수 있습니다.

설정 차이: 로컬 개발 환경과 빌드 환경에서의 설정 차이 역시 문제가 발생할 수 있는 원인 중 하나입니다. 

예를 들어, 환경 변수나 API 엔드포인트 등이 서로 다른 값을 가질 수 있으며, 이로 인해 빌드 환경에서만 에러가 발생할 수 있습니다. 위와 같은 이유로, 로컬 환경에서 정상적으로 작동하는 코드가 빌드 후 실행 시 문제가 발생할 수 있습니다. 

 

이러한 문제를 방지하려면 상태 관리를 올바르게 수행하고, 빌드 과정에서의 최적화와 설정을 고려하는 것이 중요합니다.

 

 

해결방법

useState로 userType을 상태로 관리하도록 코드를 수정하였습니다.

결과적으로 수정된 코드는 user 상태 값이 변경될 때마다 새로운 user.presentAccount.userType 값을 가져오고

userType 상태 값을 업데이트하는 역할을 합니다.

 

이를 통해 컴포넌트가 올바른 userType 값을 가지고 렌더링되도록 합니다.

///해결방법

import { useUserStore } from "src/store/adviceStore";

const { user, fetchUserData } = useUserStore();
//state 훅을 만들어서 상태값을 관리한다.
const [userType, setUserType] = useState();
 
 useEffect(() => {
    fetchUserData();
  }, []);
  
  //user 상태값이 변경될때마다 userType의 값을 새로운 값으로 변경해준다.
  useEffect(() => {
  if (user && user.presentAccount) {
    setUserType(user.presentAccount.userType);
  }
}, [user]);

 

일반 변수를 사용할 경우, 컴포넌트가 리렌더링될 때마다 해당 변수의 값은 초기화되므로,

상태를 올바르게 관리하기 어렵습니다.

따라서 React에서는 상태를 관리하기 위해 state와 관련된 hook인 useState를 사용하는 것이 좋습니다.

useState를 사용하면 컴포넌트가 리렌더링되더라도 해당 상태 값은 유지되며, 

상태가 변경될 때마다 컴포넌트가 다시 렌더링되어 변경된 값을 반영합니다. 

이렇게 하면 데이터의 일관성이 유지되고 예상한대로 작동하게 됩니다. 

 

그렇지만 모든 변수를 state 훅으로 관리할 필요는 없습니다. 

리액트에서 상태가 변경되어야 하고, 그 변경에 따라 컴포넌트가 다시 렌더링되어야 하는 경우에만

state 훅을 사용하면 됩니다.