현 회사에서 React 프레임워크를 사용하고 있다.
스타트업 특성 상 정리가 안되어있고.. es7에 장점을 최대한 이끌어내지 못하는 코드들이 많이 보였다..
프리랜서들이 걸쳐 나간 흔적이 꽤나 짙어보였다.
타입스크립트를 사용 하는 이유가 사라질정도로 any 도 남발하였고 api 문서가 정리된부분이 없어서 꽤나 애를 많이 먹는 작업이였다.
store 를 사용하지 않고 세션스토리지를 사용하는 모습이 많이 눈에 보였다.
리액트 store 는 익숙치 않아서 일단 책에서 읽은 내용과 검색한 내용을 합쳐서 zustand 라이브러리를 사용하여 store를 만들어 봤다.
기본 구조는
type InitialState = ReturnType<typeof getDefaultInitialState>;
type StoreAction = {
// 다양한 액션들의 타입을 정의
// 예를 들어, setHospitalName, setIsHospital, setUserId 등 다양한 액션들이 정의되어 있음
};
const getDefaultInitialState = () => {
// 초기 상태를 정의하는 함수
};
export const useStore = create(
// persist 미들웨어를 사용하여 Zustand 상태를 생성
persist<InitialState & StoreAction>(
// set 함수를 통해 상태를 업데이트할 수 있는 액션들을 정의
(set) => ({
// 여러 액션들과 초기 상태를 포함한 객체를 반환
}),
{
// persist 옵션 설정
name: 'account', // 상태를 지속시킬 때 사용할 이름
storage: createJSONStorage(() => sessionStorage), // 지속시킬 데이터를 저장할 storage를 설정 (여기서는 sessionStorage 사용)
}
)
)
위와 같은 형태로 만들어주고 사용 하였다. vuejs 에서 내장으로 있는 store와 거의 비슷한 느낌에 형태였다.
모든 프론트 프레임워크는 상태관리는 개념은 거의 비슷 하다고 느꼇다. 그부분에서 많은 어려움을 느끼지는 못하였다.
사용 방법은
companyName: '',
persist<InitialState & StoreAction>(
으로 값을 넣어주고
위에처럼 변수로 선언해주고 사용한다.
'react > next' 카테고리의 다른 글
next 프로젝트 공통 서브모듈 구현 (0) | 2023.11.14 |
---|