지역화

지역화 (Localization)

지역화(Localization, "l10n"이라고도 함)는 제품이나 콘텐츠를 특정 로캘이나 시장에 맞게 적응시키는 과정입니다. Material UI의 기본 로캘은 영어(미국)인데요, 다른 로캘을 사용하고 싶다면 아래 방법을 따라가면 됩니다.

출처: 문서

본문

지역화(Localization, "l10n"이라 부르기도 해요)는 제품이나 콘텐츠를 특정 로캘 또는 시장에 맞게 적응시키는 과정입니다.

Material UI의 기본 로캘은 영어(미국)입니다. 다른 로캘을 사용하려면 아래 설명을 따라가세요.

로캘 텍스트 (Locale text)

테마를 사용해 로캘 텍스트를 전역으로 구성할 수 있어요.

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { zhCN } from '@mui/material/locale';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  zhCN,
);

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

예시 (Example)

import * as React from 'react';
import TablePagination from '@mui/material/TablePagination';
import Autocomplete from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import * as locales from '@mui/material/locale';

type SupportedLocales = keyof typeof locales;

export default function Locales() {
  const [locale, setLocale] = React.useState<SupportedLocales>('zhCN');

  const theme = useTheme();

  const themeWithLocale = React.useMemo(
    () => createTheme(theme, locales[locale]),
    [locale, theme],
  );

  return (
    <Box sx={{ width: '100%' }}>
      <ThemeProvider theme={themeWithLocale}>
        <Autocomplete
          options={Object.keys(locales)}
          getOptionLabel={(key) => `${key.substring(0, 2)}-${key.substring(2, 4)}`}
          style={{ width: 300 }}
          value={locale}
          disableClearable
          onChange={(event: any, newValue: string | null) => {
            setLocale(newValue as SupportedLocales);
          }}
          renderInput={(params) => (
            <TextField {...params} label="Locale" fullWidth />
          )}
        />
        <TablePagination
          count={2000}
          rowsPerPage={10}
          page={1}
          component="div"
          onPageChange={() => {}}
        />
      </ThemeProvider>
    </Box>
  );
}

:::warning Data Grid와 Data Grid Pro 컴포넌트는 자체적인 지역화를 갖고 있어요. :::

지원되는 로캘 (Supported locales)

소스는 GitHub 저장소에서 찾을 수 있어요.

직접 번역을 만들거나 영어 텍스트를 커스터마이즈하려면 이 파일을 프로젝트에 복사하고 필요한 변경을 한 뒤, 그 로캘을 import 하면 됩니다.

pull request를 열어 Material UI에 새로운 번역을 기여하는 것도 고려해주세요. 다만 Material UI는 가장 흔한 100개 로캘을 지원하는 것을 목표로 하므로, 자주 사용되지 않는 로캘(예: 모국어 화자가 "겨우" 250만 명뿐인 gl-ES)에 대한 기여는 받지 않을 수도 있어요.

RTL 지원 (RTL Support)

아랍어, 페르시아어, 히브리어, 쿠르드어 등 오른쪽에서 왼쪽으로 쓰는 언어가 지원됩니다. 사용하려면 이 가이드를 따라가세요.

더 알아보기 (Learn more)

• Material UI 가이드 모아보기