react-i18next로 다국어 구현하기 7강: 메뉴 순서 동적 변경

메뉴 순서 동적 변경

이번 섹션에서는 언어에 따라 메뉴의 순서를 동적으로 변경하는 방법을 다룹니다. 한국어나 영어처럼 왼쪽에서 오른쪽(LTR) 방향의 언어에서는 메뉴가 왼쪽에서 오른쪽으로 정렬되고, 아랍어처럼 오른쪽에서 왼쪽(RTL) 방향의 언어에서는 메뉴가 오른쪽에서 왼쪽으로 정렬되도록 처리합니다.

React 애플리케이션에서 언어 선택에 따라 메뉴 순서가 동적으로 변경되는 모습

---

1. 언어에 따라 메뉴 순서 변경 처리

언어에 따라 메뉴의 정렬 방향을 동적으로 변경하려면, i18next의 현재 언어 설정을 기반으로 메뉴의 순서를 제어해야 합니다. 아랍어와 같은 RTL 언어에서는 메뉴 항목의 순서를 반전하여 오른쪽에서 왼쪽으로 정렬되도록 합니다.

예시 코드:

//Navbar.js

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const Navbar = () => {
  const { i18n } = useTranslation();
  const [menuItems, setMenuItems] = useState(['Home', 'About', 'Contact']);

  useEffect(() => {
    // 아랍어인 경우 메뉴 순서를 반대로 변경
    if (i18n.language === 'ar') {
      setMenuItems(['Contact', 'About', 'Home']);
    } else {
      setMenuItems(['Home', 'About', 'Contact']);
    }
  }, [i18n.language]);

  return (
    <nav>
      <ul
        style={{
          display: 'flex',
          flexDirection: i18n.language === 'ar' ? 'row-reverse' : 'row',
          justifyContent: i18n.language === 'ar' ? 'flex-end' : 'flex-start',
          listStyleType: 'none',
          padding: 0,
        }}
      >
        {menuItems.map((item, index) => (
          <li key={index} style={{ margin: '0 10px' }}>
            {item}
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Navbar;

//App.js

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

const Navbar = () => {
  const { i18n } = useTranslation();
  const [menuItems, setMenuItems] = useState(['Home', 'About', 'Contact']);

  useEffect(() => {
    // 아랍어인 경우 메뉴 순서를 반대로 변경
    if (i18n.language === 'ar') {
      setMenuItems(['Contact', 'About', 'Home']);
    } else {
      setMenuItems(['Home', 'About', 'Contact']);
    }
  }, [i18n.language]);

  return (
    <nav>
      <ul
        style={{
          display: 'flex',
          flexDirection: i18n.language === 'ar' ? 'row-reverse' : 'row',
          justifyContent: i18n.language === 'ar' ? 'flex-end' : 'flex-start',
          listStyleType: 'none',
          padding: 0,
        }}
      >
        {menuItems.map((item, index) => (
          <li key={index} style={{ margin: '0 10px' }}>
            {item}
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Navbar;

코드 설명:

• useState를 사용하여 메뉴 항목을 관리하고, useEffect를 통해 언어가 변경될 때마다 메뉴의 순서를 재설정합니다.
• 아랍어(ar)가 선택된 경우, 메뉴 항목의 순서를 반전(['Contact', 'About', 'Home'])하고, 그 외의 언어에서는 기본 순서(['Home', 'About', 'Contact'])로 설정합니다.
• ul 태그의 flexDirection 속성을 row-reverse로 설정하여 아랍어에서는 메뉴 항목이 오른쪽에서 왼쪽으로 정렬되도록 합니다.

언어에 따라 메뉴 순서 변경 처리

---

2. 한국어 및 영어: 왼쪽에서 오른쪽, 아랍어: 오른쪽에서 왼쪽

위의 코드에서, 아랍어인 경우 flexDirection을 row-reverse로 설정하고, 다른 언어인 경우 기본값인 row를 사용하여 메뉴 항목이 왼쪽에서 오른쪽으로 나열되도록 합니다.

• 한국어 및 영어(LTR): 메뉴 항목은 왼쪽에서 오른쪽으로 나열됩니다.
• 아랍어(RTL): 메뉴 항목은 오른쪽에서 왼쪽으로 나열되며, 항목의 순서가 반전됩니다.

---

실습

1. 언어에 따른 메뉴 구성 및 순서 변경 로직 추가

1. Navbar 컴포넌트에서 i18n.language 값을 확인하여, 사용자가 아랍어를 선택했을 때 메뉴 순서를 변경하도록 설정합니다.
2. flexDirection을 동적으로 변경하여 언어에 따라 메뉴 정렬 방향을 제어합니다.
3. 메뉴 항목이 언어에 맞게 자동으로 변경되는지 확인합니다.

---

마무리

이로써 언어에 따라 메뉴의 정렬 방향을 동적으로 변경하는 방법을 배웠습니다. 사용자가 아랍어를 선택하면 메뉴가 오른쪽에서 왼쪽으로 정렬되고, 한국어나 영어를 선택하면 왼쪽에서 오른쪽으로 정렬되도록 처리했습니다. 이 방식은 RTL과 LTR 레이아웃을 모두 지원하는 다국어 웹사이트를 구현할 때 매우 유용합니다.