현재 webview를 통해 개발 중입니다.
먼저 App.tsx 파일입니다.
// App.tsx
import { Button } from '@toss/tds-mobile';
const App = () => {
return (
<div
style={{
flex: 1,
padding: '20px',
backgroundColor: 'lightblue',
height: '100vh',
}}
>
{/* 1. 일반 텍스트가 보이는지 확인 */}
<h1>렌더링 테스트</h1>
{/* 2. 버튼이 동작하는지 확인 */}
<Button style={{ backgroundColor: 'blue', color: 'white' }}>버튼</Button>
{/* 3. 기본 버튼 */}
<Button>기본 버튼</Button>
</div>
);
};
export default App;
그리고 문제가 되는 코드 두 가지는 아래와 같습니다.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Provider as JotaiProvider } from 'jotai';
// 첫 번째 main.tsx
import App from '@/App';
import { Button } from '@toss/tds-mobile';
import '@/index.css';
import { TDSMobileAITProvider } from '@toss/tds-mobile-ait';
// QueryClient 인스턴스 생성
const queryClient = new QueryClient({
defaultOptions: {
queries: {
// 실패 시 1번만 재시도
retry: 1,
// 웹뷰에서는 포커스 재진입 시 리패치 방지
refetchOnWindowFocus: false,
},
},
});
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
{/* 데이터 페칭 */}
<QueryClientProvider client={queryClient}>
{/* 전역 상태 관리 */}
<JotaiProvider>
{/* 디자인 시스템 / AIT Provider */}
<TDSMobileAITProvider>
<App />
</TDSMobileAITProvider>
</JotaiProvider>
</QueryClientProvider>
</React.StrictMode>,
);
// 두 번째 main.tsx
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@toss/tds-mobile';
import './index.css';
import App from '@/App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<StrictMode>
<ThemeProvider>
<App />
</ThemeProvider>
</StrictMode>,
);
첫 번째 main.tsx의 결과는 아래와 같습니다.
두 번째 main.tsx의 결과는 아래와 같습니다.
왜 첫 번째 코드는 제대로 렌더링이 안되는 지, 해결 방법이 무엇인지 알고 싶습니다. 참고로 아래 코드로 수행해도 빈 화면이 뜨는 것을 보면 라이브러리 간의 충돌은 아니지 않을까 싶습니다. 혹시 필요하신 파일의 코드가 있으면 댓글로 첨부하겠습니다~
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from '@/App';
import { TDSMobileAITProvider } from '@toss/tds-mobile-ait';
ReactDOM.createRoot(document.getElementById('root')!).render(
<StrictMode>
<TDSMobileAITProvider>
<App />
</TDSMobileAITProvider>
</StrictMode>,
);