11회차 과제 - 김민정

[minjeong517]

신경써서 구현한 부분

1. context 생성

import React, { createContext } from "react";

const LanguageContext = createContext(null);

export default LanguageContext;

2. provider 감싸기

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

• value에 language 상태와 언어 전환 함수 KO, EN을 함께 전달하여 하위 컴포넌트에서 언어 상태를 조회하여 조건부 렌더링하거나 KO/EN를 호출할 수 있도록 하였습니다.

3. useContext 사용

import LanguageContext from "../LanguageContext";

const Home = () => {
  const { language } = useContext(LanguageContext);
  const { languageIs } = language;

  return (
    <div className="p-5 text-2xl font-bold flex justify-center">
      {languageIs === "한국어"
        ? "김민정의 포트폴리오 🐹"
        : "Minjeong Kim's Portfolio 🐹"}
    </div>
  );
};

export default Home;

• useContext를 사용해 전역 언어 상태를 가져와서 선택한 언어에 따라 보이는 홈 화면의 텍스트를 조건부 렌더링하였습니다.

새롭게 알게 된 내용

const TEXT = {
  한국어: {
    ...
  },
  English: {
    ...
  },
};

저는 조건부 렌더링으로 삼항연산자를 사용하였지만 위의 코드처럼 언어별로 보여줄 텍스트들을 객체로 선언하면 유지보수도 간편해지고, 영어가 아닌 다른 언어를 추가할 때도 TEXT 객체에만 내용을 추가하면 되어서 언어 변환 작업이 더욱 쉬워진다는 것을 알게 되었습니다.

실행 화면

[gyeongsangseaman]

코드를 간결하고 직관적으로 작성하셔서 이해하기 쉬웠고, PR에서의 설명도 도움됐습니다 !
고생하셨습니다 !!

[gyeongsangseaman]

상태 선언에서 isChanged를 설정하고 아래 함수에서도 언어 변경 시 true나 false로 변경되도록 하셨지만, 다른 컴포넌트에서는 languageIs만으로 텍스트 출력 조건을 처리하고 있어요.
그렇다면 isChanged는 불필요한 부분이라 생각되는데 빼는 편이 어떨까요 ?

[gyeongsangseaman]

PR에서도 말씀해주셨는데 텍스트들을 객체로 선언하는 것도 좋은 방법이고, 더 나아가서 이런 객체들을 외부 파일로 따로 빼서 사용하는 것도 좋을 것 같아요 !
확장성이나 유지보수 측면에서도 더 효과적이라고 생각되구요 !