coin FE

현 회사에서 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와 거의 비슷한 느낌에 형태였다.

모든 프론트 프레임워크는 상태관리는 개념은 거의 비슷 하다고 느꼇다. 그부분에서 많은 어려움을 느끼지는 못하였다.

사용 방법은

으로 값을 넣어주고 

위에처럼 변수로 선언해주고 사용한다.

구조

서브모듈 컴포넌트 - console-component

(콘솔 공통 컴포넌트는 컴포넌트 라이브러리 소스코드와 샘플을 실행 할 수 있는 storybook 으로 구성)

공통 라이브러리를 분리 하여 재사용 할 수 있도록 구현 프로젝트 컴포넌트를 개발하는 목적이 아니면 이프로젝트를 단독으로 사용하는 경우는 없으며 웹프론트엔드 프로젝트의 gitsubmodule 로 포함 하여 사용

실제 프로젝트 컴포넌트 - mobile-web 

실제 프로젝트 연동 컴포넌트 생성

1. 프로젝트 클론

2. yarn 패키지 설치

3. 프로젝트 개발 환경 및 빌드

모바일 웹 구성도

이것으로 서브모듈 연동 완료

테이블이라는 공통 항목등 

context API 주입성으로 만들어서 부모에서 자식객체를 가져다가 쓰는 방식으로 구현 등 여러가지를 구현가능하다 아래와 같이 예시를 만들어서 사용

테이블은 ag그리드를 사용하였고

실제 모바일 웹에서 사용 할때 테이블 모습

table.tsx 부분 코드

이런식으로 셋팅하여 퍼블리셔든 누구든 간결하게 옵션만 추가하면 돌아가는 방식으로 코드 구축을 한다.

공통 앱일경우 여러가지 방법이 있지만 

createContext 를 사용하여 하는 방법을 채택한건 vue slot 처럼 간결한 기능을 구현할 방법을 모색하다가 가장 비슷무리한 방법을 채택 하지만 위에 내가 작성한 방법은 전역으로 상태를 관리하는 방법이고 그에따른 단점이 있다.

공식 문서에만 봐도 컨텍스트 api 의 존재 이유는 명확하게 나와있다. prop 으로 단계별로 내리는 방법이 아닌 깊이 여부와 무관하게 데이터가 필요한 컴포넌트에서만 불러다가 사용이 가능하다. 이에따른 무분별한 사용은 현재 어디서 데이터가 내려오는지를 파악하기 힘들어지는 부분과 유지보수에 힘든 상황이 발생 하지 않도록 구현을하고 만들어야한다. 지금과 같은 공통 컴포넌트로 뺴놓은 상태에서는 컨텍스트 api 를 사용하는게 차선책으로 보여 선택하였다.

부모컴포넌트가 리렌더링이 되면 하위에 모든 컴포넌트도 리렌더링이 된다. 이런경우를 막기 위해서는 react memo 로 감싸면 되는데 하지만 이런식으로 구성하면 reactmemo 때문에 프로비더에 효과가 사라진다. props 를 가지고 변경하고 재렌더링하기 때문에 이런점을 주의해서 구현해야한다. 하위에 모든 컴포넌트를 리렌더링하는 프로비더를 사용할때는 주의를 요한다.