11회차 과제 - 신혜진

[hyeji-neee]

신경써서 구현한 부분

LanguageContext 생성

createContext를 통해 Context 객체를 생성하여 이후 컴포넌트에서 useContext(LanguageContext)를 통해 접근 가능하도록 구현

const LanguageContext = createContext(null);

LanguageProvider 구현

const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState("ko");

  const changeLanguage = () => {
    setLanguage((prev) => (prev === "ko" ? "en" : "ko"));
  };

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

• language 상태를 통해 현재 선택된 언어 저장
• changeLanguage : 버튼 클릭 시 언어를 전환하는 함수
• Provider를 통해 하위 컴포넌트에 전역으로 language, changeLanguage를 전달

App.jsx - Provider 감싸기

LanguageProvider가 App 전체를 감싸도록 구성 -> 모든 페이지에서 언어 상태에 접근할 수 있도록 설정

function App() {
  return (
    <LanguageProvider>
      <BrowserRouter>
        <Routes>
          ...
        </Routes>
      </BrowserRouter>
    </LanguageProvider>
  );
}

전체적인 언어 전환 기능 구현 방식

1. 삼항 연산자를 사용한 조건부 렌더링

<h1>{language === "ko" ? "프로젝트 목록" : "Project List"}</h1>
<button>{language === "ko" ? "홈으로 돌아가기" : "Return to Home"}</button>

2. 기존 배열 -> 객체 변환

다국어 처리를 위해 기존의 문자열 배열을 다음과 같이 언어별 객체 구조로 변경

title: "Term Project",  // 변경 전

title: {   
  ko: "텀 프로젝트",    // 변경 후
  en: "Term Project",
},

그리고 컴포넌트에서는 language 값을 키로 활용하여 아래 코드와 같이 사용하였습니다.

<h1>{project.title[language]}</h1>

<ul>                                       
  {projects.map((project) => (    // map 함수를 사용하는 코드에서도 동일하게 적용
    <li key={project.projectId}>
      {project.projectId}. {project.title[language]}
    </li>
  ))}
</ul>

결과 화면

질문

현재 언어 상태가 영어인 상태에서 404 에러 페이지로 이동하면, 해당 페이지에서는 언어가 다시 기본값인 한국어로 초기화되는 문제가 발생하였습니다.
아래 App.jsx 파일에서 <Route path="*" element={<NotFound />} /> 부분을 중첩 라우팅 안으로 옮겨서 404 페이지에서도 버튼을 통해 언어 전환 기능을 구현하는 것이 최선일지 궁금합니다!

function App() {
  return (
    <LanguageProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="projects" element={<Projects />} />
            <Route path="projects/:projectId" element={<ProjectDetail />} />
            <Route path="about" element={<About />} />
            // 이 위치로
          </Route>
          <Route path="*" element={<NotFound />} />    // 이 부분을
        </Routes>
      </BrowserRouter>
    </LanguageProvider>
  );
}

[moonchanju]

useState로 언어 상태를 잘 관리하고 있고, changeLanguage 함수도 간단하고 직관적으로 잘 만드셨어요!

LanguageContext.Provider로 children들을 감싸서, 하위 컴포넌트 어디서든 언어 값을 쉽게 쓸 수 있게 구성한 것도 좋습니다.

구조도 깔끔해서 보기 편하고, 재사용하기에도 딱 좋은것 같아요

[moonchanju]

language 값을 기준으로 텍스트가 한글/영어로 자연스럽게 바뀌도록 잘 구성하셨어요. 사용자 입장에서 언어 전환이 즉시 적용돼서 훨씬 보기 좋고 편하네요!

profileData[language]처럼 배열도 언어에 따라 다르게 처리한 부분이 특히 인상적이에요. 조건문도 깔끔하게 짜셔서 가독성이 좋은것 같아요 고생하셨습니다!