Material-UI 테마를 사용하여 Monorepo에서 라이브러리 컴포넌트와 애플리케이션 컴포넌트 간 Context를 공유하는 법 [해결 방안 포함]

라이브러리 컴포넌트와 애플리케이션 컴포넌트 간에 컨텍스트 공유하는 방법

모노레포에서 라이브러리 컴포넌트와 애플리케이션 컴포넌트 간에 컨텍스트를 공유하려고 할 때, 테마 접근에 문제가 발생할 수 있습니다. 이 기사에서는 Material-UI의 테마 기능과 관련된 일반적인 문제를 살펴보고, 테마 공유를 원활하게 하기 위한 해결책을 제시하겠습니다.

문제: 라이브러리 컴포넌트에서의 테마 접근 문제

lerna를 사용하여 구성된 모노레포에서 애플리케이션 패키지와 컴포넌트 패키지로 구성된 시나리오를 고려해보겠습니다. 애플리케이션 패키지는 루트 애플리케이션 역할을 하며, 컴포넌트 패키지에는 Material-UI 컴포넌트를 포함한 여러 React 컴포넌트가 있습니다.


import { ThemeProvider } from '@material-ui/styles';

function App() {
return (
<ThemeProvider theme={theme}>
<MyMaterialComponent/>
</ThemeProvider>
);
}


이 설정에서 애플리케이션 패키지는 Material-UI의 ThemeProvider를 사용하여 전체 애플리케이션에 테마를 제공합니다. 컴포넌트 패키지에 위치한 MyMaterialComponent 컴포넌트는 makeStyles 훅을 사용하여 이 테마를 사용합니다.


import { makeStyles } from '@material-ui/styles';
import Card from "@material-ui/core/Card";

const useStyles = makeStyles(theme => ({
root: {
//color: theme.palette.primary.main //오류 발생
}
}));

export function MyMaterialComponent() {
const classes = useStyles();
return (
<Card>
<span className={classes.root}>이것은 컴포넌트입니다</span>
</Card>
);
}


이러한 컴포넌트들이 동일한 패키지 내에서 사용될 때, MyMaterialComponent의 스타일 함수는 테마에 올바르게 접근합니다. 그러나 컴포넌트 패키지가 다른 패키지(예: 애플리케이션 패키지)에서 사용될 때, 테마는 더 이상 사용할 수 없으며 빈 객체로 나타납니다.

해결책: 웹팩 별칭 설정

이 문제를 해결하기 위한 한 가지 방법은 애플리케이션 패키지에서 웹팩 별칭 설정을 구성하는 것입니다. 이 설정은 컴포넌트 라이브러리가 동일한 노드 모듈을 사용하도록 지시하여 테마를 공유합니다.

다음은 react-app-rewired와 customize-cra를 사용한 예시입니다:


const { override, addWebpackAlias } = require("customize-cra");
const path = require('path');

module.exports = override(
addWebpackAlias({
//...
"@material-ui/styles": path.resolve("./node_modules/@material-ui/styles")
})
)


또는 webpack 설정을 수동으로 관리하는 경우, 사용자 정의 웹팩 구성을 통해 비슷한 결과를 얻을 수 있습니다.

더 나은 해결책: 동료 종속성

웹팩 별칭 구성은 문제를 해결할 수 있지만, 특히 Material-UI와 같은 라이브러리를 공유할 때 가장 이상적인 해결책은 아닐 수 있습니다. 라이브러리 사용자에게 더 원활한 경험을 제공하기 위해 동료 종속성을 사용해보세요.

라이브러리의 package.json에서 @material-ui/core를 devDependencies에서 peerDependencies로 이동함으로써, 라이브러리를 사용하는 애플리케이션이 필요한 종속성을 명시적으로 설치하고 제공해야 함을 보장할 수 있습니다.

예를 들면:


"peerDependencies": {
"@material-ui/core": "^4.0.0"
}


이렇게 함으로써, 라이브러리는 더 이상 애플리케이션의 구성된 종속성에 의존하지 않고 필요한 테마에 독립적으로 접근할 수 있습니다.

결론

모노레포 설정에서 라이브러리 컴포넌트와 애플리케이션 컴포넌트와 같은 컨텍스트를 공유하는 것은 어려울 수 있습니다. 웹팩 별칭 구성이나 동료 종속성을 활용함으로써 Material-UI 테마와 같은 원하는 컨텍스트에 대한 라이브러리 컴포넌트의 접근성을 보장할 수 있습니다. 이러한 해결책들을 구현함으로써 사용자들에게 보다 원활한 경험을 제공하고 웹팩 설정 수정이 필요하지 않도록 할 수 있습니다.

다른 패키지 간에 컴포넌트를 공유할 때, 테마 접근과 같은 컨텍스트 공유 문제에 대해 중요한 것을 기억해야 합니다. 이는 일관성을 유지하고 예상치 못한 동작을 방지하는 데 중요합니다.

참고 자료 : 

reactjs