React context 코드 단순화하기 :: 리팩토링

문제 상황

React context 사용 시 기존 코드 구성이 context 내부 요소가 늘어날 수록 복잡해져서 리팩토링하려 한다.

 

기존 구현

// 구성
const UserContext = createContext<userType>({});
const SignInContext = createContext<()=>void>(()=>{});
export const UserContextProvider = ({ children }) => {
    const [user, setUser] = useState<userType>();
    const signIn = () => {};

    return (
        <UserContext value={user}>
            <SignInContext value={signIn}>
                {children}
            </SignInContext>
        </UserContext>
    );
}

export function useUserState() {
    const context = useContext(UserContext);
    return context;
}

export function useSignIn() {
    const context = useContext(loginContext);
    return context;
}

// 사용
const user = useUserState();

기존의 코드 구성은 위와 같이 필요한 요소들을 모두 하나의 Context로 따로 만들어서 value를 할당해주는 형식이었고, 이렇게 하면 context를 사용할 컴포넌트가 필요한 요소에만 영향을 받도록 구성할 수 있다고 생각하였다.

예를 들어, signIn은 필요하지 않고 오직 user의 정보만 필요한 컴포넌트가 있다면 signIn에 변화에 따라 리렌더링될 필요가 없으므로 필요한 context로만 감싸주면 된다고 생각한 것이다.

하지만 실제로는 해당 데이터들이 아예 분리되어있는 것이 아니다. signIn은 api를 호출하고 나서 userContext를 갱신해주어야 하기 때문에 결국 signIn만을 사용하는 컴포넌트도 user와 결합하고 있다.

어차피 관련된 모든 요소에 의해 리렌더링 된다고 하면 코드를 간단하게 만들 수 있을 것 같다.

 

개선 코드

// 구성
export interface UserContextType {
  signIn?: () => void,
  user? : userType | null,
}

const UserContext = createContext<UserContextType>({});

export const UserContextProvider: React.FC = ({ children }) => {
    const [user, setUser] = useState<userType>();
    const signIn = () => {};

  return (
    <UserContext.Provider
      value={{
        signIn,
        user,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

export const useUserContext = () => {
  const userContext = useContext(UserContext);
  return userContext;
};

// 사용
const {user, signIn} = useUserState();

위와 같은 방식은 Context를 분리하지 않고 하나의 object로 넘겨주는 방식이다. 이런 방식은 VSCode와 같은 툴에서 해당 함수를 참조하는 부분으로 이동하는 기능을 쓸 수 없다는 단점이 있다.

 

결론

Lighthouse 측정 결과 context 차이에 따른 큰 성능 변화는 없었다. 간단한 코드 작성을 위해 object 형식으로 Context를 구성하기로 하자.