11회차 과제 - 김정운

[vni911]

신경써서 구현한 부분

• LanguageProvider.jsx

const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState("ko");
  const toggleLanguage = () => setLanguage(prev => prev === "ko" ? "en" : "ko");
  return (
    <LanguageContext.Provider value={{ language, toggleLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

toggleLanguage 함수로 한국어/영어 전환이 가능합니다.

• Navbar.jsx

const { language, toggleLanguage } = useContext(LanguageContext);

        </button>
        <button
          onClick={toggleLanguage}
          className="ml-4 px-2 py-1 bg-blue-400 rounded-full hover:bg-blue-500 text-white"
        >
          {texts[lang].langBtn}
        </button>

버튼을 클릭하면 toggleLanguage가 실행되어 언어가 전환되고 버튼 안 텍스트도 현재 언어에 맞게 표시됩니다

• App.jsx

const App = () => {
  return (
    <LanguageProvider>
      <BrowserRouter>
          ...
      </BrowserRouter>
    </LanguageProvider>
  );
}

App 전체를 LanguageProvider로 감싸서 모든 컴포넌트에서 언어 전역 상태를 사용할 수 있게 했습니다

---

새롭게 알게 된 내용

const texts = {
  ko: {
   ...
  },
  en: {
   ...
  },
};

현재 언어에 맞는 객체에서 값을 꺼내와서 사용합니다.
ex) {texts[lang].projects}, {texts[lang].about}, {texts[lang].langBtn}

[RSH0770]

기존 라우팅 구조를 LanguageProvider로 잘 감싸셨네요!

[RSH0770]

useContext를 통해 언어 상태에 접근하도록 잘 만드셨네요!
texts를 통해 한국어와 영어 텍스트를 정의하고, lang을 통해서 출력할 언어를 변경하도록 만든 것도 좋은 방법인 것 같습니다!

[eveveev]

ko나 en이 아닌 다른 값이 들어왔을 때 기본값 ko를 사용하도록 하신 점이 정말 좋은 아이디어 같습니다!!