0Pricing
React Academy · 강의

복수형 처리와 보간

개수에 따른 복수형을 처리하고 번역된 문자열에 동적 값을 삽입합니다.

복수형 처리와 보간은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 학습에서는 i18next의 보간 및 복수형 지원을 사용해 수에 따른 복수형을 처리하고 번역된 문자열에 동적 값을 삽입합니다.

보간 기초

번역 문자열에서 이중 중괄호를 자리 표시자로 사용합니다. 변수 값을 담은 객체를 t()의 두 번째 인수로 전달합니다.
// JSON: "greeting": "Hello, {{name}}!"
t('greeting', { name: 'Alice' }); // Hello, Alice!

여러 보간 변수

하나의 문자열에서 필요한 만큼 보간 변수를 사용할 수 있습니다.
// JSON: "summary": "You have {{count}} messages in {{folder}}"
t('summary', { count: 5, folder: 'Inbox' });
// You have 5 messages in Inbox

HTML 이스케이프

기본적으로 i18next는 보간된 값의 HTML 문자를 이스케이프합니다. 보간된 값 안에 HTML을 렌더링하려면 init 구성에서 `escapeValue: false`로 설정합니다. React에서는 JSX를 이스케이프하므로 이미 안전합니다.

복수형

i18next는 복수형을 자동으로 지원합니다. 단수형에는 `key`를, 복수형에는 `key_other`(또는 `key_plural`)를 정의합니다. 보간 객체에 `count`를 전달합니다.
// JSON:
// "item": "{{count}} item"
// "item_other": "{{count}} items"

t('item', { count: 1 }); // 1 item
t('item', { count: 5 }); // 5 items

언어별 복수형 규칙

언어마다 복수형 규칙이 다릅니다. 러시아어에는 복수형이 4가지이고 아랍어에는 6가지가 있습니다. i18next는 각 언어에 대한 유니코드 CLDR 규칙을 자동으로 사용합니다. 번역 파일에 필요한 모든 형식을 정의합니다.
// Russian (ru):
// key_one, key_few, key_many, key_other

0 형식

i18next는 count가 0일 때 사용하는 특수한 `key_zero` 형식도 지원합니다. 이를 통해 '0개' 대신 '항목 없음'처럼 다른 표현을 사용할 수 있습니다.
// JSON:
// "messages_zero": "No messages"
// "messages_one": "{{count}} message"
// "messages_other": "{{count}} messages"

t('messages', { count: 0 }); // No messages

복수형이 있는 중첩 키

중첩 객체 안에 복수형 키를 넣을 수 있습니다. 일반적인 중첩 키와 마찬가지로 점 표기법을 사용해 접근합니다.
// JSON: { "cart": { "items_one": "item", "items_other": "items" } }
t('cart.items', { count: 3 }); // items

날짜 및 숫자 형식 지정

i18next는 Intl API와 통합되어 로캘에 맞는 날짜 및 숫자 형식 지정을 지원합니다. i18n.format() 또는 intlify 플러그인을 사용해 번역의 일부로 날짜 형식을 지정합니다.
t('lastSeen', { date: new Date(), formatParams: {
  date: { month: 'long', day: 'numeric' }
}});

문맥 기반 번역

서로 다른 문맥에서 문법적으로 다른 형식이 필요할 때 `context` 옵션을 사용합니다(예: 성별에 따른 단어). 번역 파일에 `key_male` 및 `key_female` 변형을 정의합니다.
// JSON: { "hero_male": "Hero", "hero_female": "Heroine" }
t('hero', { context: 'female' }); // Heroine

빠른 확인

i18next를 사용하는 번역 문자열에 'username'이라는 동적 값을 어떻게 전달하나요?

정리

보간에는 {{variable}}을, 복수형에는 key_other/key_one을, 0 형식에는 key_zero를 사용합니다. i18next는 언어별 유니코드 CLDR 복수형 규칙을 자동으로 적용합니다. 문법적 변형에는 context를 사용합니다.

다음 학습

다음 학습: **언어 전환기 및 번역 지연 로딩** — 로캘 전환기를 만들고 필요할 때 번역 번들을 로드합니다.

자주 묻는 질문

“복수형 처리와 보간” 강의는 무료인가요?

네 — “복수형 처리와 보간” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“복수형 처리와 보간”에서 뭘 배우나요?

개수에 따른 복수형을 처리하고 번역된 문자열에 동적 값을 삽입합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“복수형 처리와 보간” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. react-i18next 설정하기
  2. useTranslation 훅 사용하기
  3. 복수형 처리와 보간
  4. 언어 전환기와 번역 지연 로딩
← React Academy(으)로 돌아가기