JSON 어레이를 통해 반복하여 변환 파일(i18N)의 구성요소를 렌더링합니다.

반응형

197 소개

제가 리액트로 웹사이트를 만들 때, 제가 설명하려고 하는 번역에 문제가 생겼습니다.

이 때 "이런, JSON(경로)을 가져와 데이터에 액세스할 수 있다는 것을 알고 계십니까?"라고 말할 수 있습니다.

네, 그게 쉬운 방법이지만, 이 배열은 웹사이트에 보여질 모든 정보를 포함하고 있고 제가 번역하기를 원했기 때문에 저는 JSON 파일이 두 개 있어서 안 될 것 같습니다.

 

(하단의 링크).

구현

저는 리액트 앱을 만드는 방법 및/또는 설정하는 방법에 대해 설명하지 않겠습니다. i18N 라이브러리와 JSON 어레이 반복 설정 방법에만 집중하겠습니다.

• 루트 폴더에 i18n.js라는 파일을 생성하고 다음을 작성합니다.

다음과 같은 i18N 라이브러리를 사용했습니다.

 

• 백엔드: (i18-next-http-backend) 변환 파일을 자동으로 가져옵니다(나처럼 폴더와 파일을 호출하면 리소스 경로도 지정할 필요가 없습니다).
• LanguageDetector: (i18-next browser-languageetector)는 브라우저의 언어를 자동으로 감지하여 웹 사이트에 해당 언어를 표시합니다. 여기서 탐지 옵션을 볼 수 있습니다.

2. translations.json 파일을 만듭니다.

공용 폴더 안에 로케일즈라는 폴더를 만들었고 그 안에 내가 사용하고자 하는 언어가 다른 모든 폴더를 만들었습니다.

저 같은 경우에는 스페인어는 es, 영어는 en만 사용하고 번역문 안에는 json 파일 이런 거 써요.

 

보시다시피 섹션이라는 JSON 파일 내부에 배열이 있고, 몇 가지 아이템이 있습니다.

이 배열을 반복하여 내 배열에 있는 항목 수만큼 구성요소를 렌더링하는 것입니다.

3. index.js 파일 수정
4. App.js 파일에서 배열을 반복합니다.

js 파일에서 JSON 키에 액세스하는 방법은 useTranslation()이라는 i18N 함수를 사용하는 것입니다.

 

그래서 9행에서 section이라는 내 배열을 검색하려면 returnObjects 플래그를 추가하고 true로 설정하여 객체를 반환하고 끔찍한 오류를 피해야 합니다.

이 오류는 개체(이 경우 배열) 대신 문자열 키에 액세스하려고 하기 때문입니다.

따라서 어레이를 통해 여러 JSON 파일에 액세스하고 JSON 어레이에 저장된 만큼의 구성요소를 렌더링할 수 있습니다.

이 게시물에 오류나 개선할 점이 있으면 댓글을 달아주시면 제가 기꺼이 읽어드리겠습니다!

고맙고 행복한 코딩!

 

링크

이전 웹 사이트의 코드

대응 웹사이트 코드

웹 사이트(확인 시 변경될 수 있음)