197 소개
제가 리액트로 웹사이트를 만들 때, 제가 설명하려고 하는 번역에 문제가 생겼습니다.
이 때 "이런, JSON(경로)을 가져와 데이터에 액세스할 수 있다는 것을 알고 계십니까?"라고 말할 수 있습니다.
네, 그게 쉬운 방법이지만, 이 배열은 웹사이트에 보여질 모든 정보를 포함하고 있고 제가 번역하기를 원했기 때문에 저는 JSON 파일이 두 개 있어서 안 될 것 같습니다.
(하단의 링크).
구현
저는 리액트 앱을 만드는 방법 및/또는 설정하는 방법에 대해 설명하지 않겠습니다. i18N 라이브러리와 JSON 어레이 반복 설정 방법에만 집중하겠습니다.
- 루트 폴더에 i18n.js라는 파일을 생성하고 다음을 작성합니다.
다음과 같은 i18N 라이브러리를 사용했습니다.
- 백엔드: (i18-next-http-backend) 변환 파일을 자동으로 가져옵니다(나처럼 폴더와 파일을 호출하면 리소스 경로도 지정할 필요가 없습니다).
- LanguageDetector: (i18-next browser-languageetector)는 브라우저의 언어를 자동으로 감지하여 웹 사이트에 해당 언어를 표시합니다. 여기서 탐지 옵션을 볼 수 있습니다.
- translations.json 파일을 만듭니다.
공용 폴더 안에 로케일즈라는 폴더를 만들었고 그 안에 내가 사용하고자 하는 언어가 다른 모든 폴더를 만들었습니다.
저 같은 경우에는 스페인어는 es, 영어는 en만 사용하고 번역문 안에는 json 파일 이런 거 써요.
보시다시피 섹션이라는 JSON 파일 내부에 배열이 있고, 몇 가지 아이템이 있습니다.
이 배열을 반복하여 내 배열에 있는 항목 수만큼 구성요소를 렌더링하는 것입니다.
- index.js 파일 수정
- App.js 파일에서 배열을 반복합니다.
js 파일에서 JSON 키에 액세스하는 방법은 useTranslation()이라는 i18N 함수를 사용하는 것입니다.
그래서 9행에서 section이라는 내 배열을 검색하려면 returnObjects 플래그를 추가하고 true로 설정하여 객체를 반환하고 끔찍한 오류를 피해야 합니다.
이 오류는 개체(이 경우 배열) 대신 문자열 키에 액세스하려고 하기 때문입니다.
따라서 어레이를 통해 여러 JSON 파일에 액세스하고 JSON 어레이에 저장된 만큼의 구성요소를 렌더링할 수 있습니다.
이 게시물에 오류나 개선할 점이 있으면 댓글을 달아주시면 제가 기꺼이 읽어드리겠습니다!
고맙고 행복한 코딩!
링크
이전 웹 사이트의 코드
대응 웹사이트 코드
웹 사이트(확인 시 변경될 수 있음)
'javascript' 카테고리의 다른 글
내 배열 메서드 치트 시트 생략 (0) | 2022.01.12 |
---|---|
React: 더 나은 코딩 방법 (0) | 2022.01.12 |
JavaScript Array.map(): 모든 내용을 읽어 보십시오! (0) | 2022.01.12 |
도움 요청의 중요성 (0) | 2022.01.12 |
Regex 비밀이 밝혀지다 (0) | 2022.01.12 |
댓글