20241008 TIL: 다국어 처리 지원하기 [진행중]

✅ 오늘 배운 것

오늘은 설정에서 i18n 패키지를 통해 다국어를 바꿔주는 작업을 진행했다. '한국어'와 '영어' 옵션 중에 선택할 수 있도록 UI Kitten의 Menu 옵션을 사용해주었다. 

 

그리고 selectedIndex라는 메뉴의 옵션을 통해 현재 사용하고 있는 언어가 선택된 것으로 표기되도록 해 주었다. 

 

전체 코드는 다음과 같다. 

const SettingsLanguageView = () => {
  const { t, i18n } = useTranslation();
  const [selectedIndex, setSelectedIndex] = useState(new IndexPath(setIndex()));

  const handleKoreanPress = () => {
    i18n.changeLanguage('ko');
  };

  const handleEnglishPress = () => {
    i18n.changeLanguage('en');
  };

  const setIndex = () => {
    if (i18n.language === 'ko') {
      return 0;
    } else {
      return 1;
    }
  };

  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva} theme={eva.light}>
        <SafeAreaView style={styles.container}>
          <Layout style={styles.layout} level="1">
            <Menu
              selectedIndex={selectedIndex}
              onSelect={index => setSelectedIndex(index)}
            >
              <MenuItem
                title={t('views.settingsLanguageView.korean')}
                onPress={handleKoreanPress}
              />
              <MenuItem
                title={t('views.settingsLanguageView.english')}
                onPress={handleEnglishPress}
              />
            </Menu>
          </Layout>
        </SafeAreaView>
      </ApplicationProvider>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  layout: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  text: {
    textAlign: 'center',
  },
  link: {
    color: 'blue',
    textDecorationLine: 'underline',
  },
});

export default SettingsLanguageView;

 

이제 의도한 대로 다국어 변경 화면이 잘 나오는지를 테스트해보려고 했는데, 개발 서버에 오류가 있어서 소셜로그인이 현재는 안 되는 상황이라 결과는 내일 확인할 수 있겠다. 오늘 다른 팀원이 고쳐본다고 했었는데 내일 만나서 진행상황을 같이 봐야할 것 같다.