CreateContext2

CreateContext를 사용해 문자열을 다국어 지원을 만든어 본다.

LanguageContext : 현재 언어 상태와 언어 변경 함수 제공
LanguageProvider : Provider를 통해 language와 toggleLanguage를 하위 컴포넌트에 전달
translations : 다국어 문자열을 객체로 관리 (한국어/영어)
HomeScreen : useContext로 현재 언어를 가져와 UI에 반영
버튼 클릭 시 toggleLanguage 실행 → 언어가 바뀌면서 UI도 자동 업데이트

translations.js 파일

export const translations = {
ko: {
    greeting: "안녕하세요!",
    button: "언어 변경"
},
en: {
    greeting: "Hello!",
    button: "Change Language"
},
es: {
    greeting: "¡Hola!",
    button: "Cambiar idioma"
}
};

LanguageContext.js 파일

import React, { createContext, useState } from 'react';

export const LanguageContext = createContext();

export function LanguageProvider({ children }) {
const [language, setLanguage] = useState("ko"); // 기본값: 한국어

const changeLanguage = (lang) => {
    setLanguage(lang);
};

return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
);
}

const LanguageContext = createContext() //OK
export LanguageContext;

처럼 사용해도 되지만 아래처럼 한줄로 해도 된다.

export const LanguageContext = createContext(); //OK

export default const LanguageContext = createContext(); //문법 오류, 이건 안된다.

export default 뒤에는 **표현식(expression)**이 와야 하는데 const ...는 선언문(statement)이기 때문에 syntax error가 난다.

HomeScreen.js 파일

import React, { useContext } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { LanguageContext } from './LanguageContext';
import { translations } from './translations';

export default function HomeScreen() {
const { language, changeLanguage } = useContext(LanguageContext);

return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {translations[language].greeting}
      </Text>

      <View style={styles.buttons}>
        <Button title="한국어" onPress={() => changeLanguage("ko")} />
        <Button title="English" onPress={() => changeLanguage("en")} />
        <Button title="Español" onPress={() => changeLanguage("es")} />
      </View>
    </View>
);
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
},
text: {
    fontSize: 24,
    marginBottom: 20
},
buttons: {
    flexDirection: "row",
    gap: 10
}
});

App.js 파일

import React from 'react';
import { LanguageProvider } from './LanguageContext';
import HomeScreen from './HomeScreen';

export default function App() {
return (
    <LanguageProvider>
      <HomeScreen />
    </LanguageProvider>
);
}