번역 분리및 로딩 지연 설정

프로젝트 설정

1. 의존성 추가

//npm 
npm install i18next-http-backend
//yarn
yarn add i18next-http-backend

2. 디렉토리 추가

public 폴더에 locales 폴더 추가
local 하위 폴더에 en, kr 폴더 추가

3. 번역 파일 추가 (json)

en/translation.json

{
    "learn" : "learn react-i18next",
    "description" : "Edit <1>src/App.js</1> and save to reload"
}

kr/translation.json

{
    "learn" : "리액트 i18n 배우기",
    "description" : "<1>src/App.js</1> 수정 및 저장"
}

4. i18n 설정 수정

i18n.js

i18next
    .use(initReactI18next)
    .use(LanguageDetector)
	.use(Backend) //언어 설정을 불러옴
    .init({
    debug: true,
    fallbackLng : 'en',
  	//resources 제거
})

Backend 는 서버처럼 클라이언트에서 언어설정 디렉토리의 파일에서 번역본을 요청하는 역할이다.

5. index.js 수정

번역이 비동기식으로 로드되므로 오류를 방지하기 위해서 설정 필요
index.js

 <React.StrictMode>
    <React.Suspense fallback="loading...">
      <App />
    </React.Suspense>
 </React.StrictMode>

Suspense
렌더링 작업이 끝날 때까지 잠시 중단시키고 fallback에 해당하는 내용을 보여주고 렌더링 작업 완료시 보여줌