에러 발생

• 현재 프로젝트 진행중에 i18n을 사용중에 있었는데
  새로고침을 진행하게 되면 init language로 돌아오는 현상을 목격했다.

  

• 현상을 해결하기 위해서 구글링중 발견한 방법은 로컬 스토리지에 현재 언어를 저장하는 것이였다.

// 기존 
		 <button
            onClick={() => {
              changelanguageToKo();
            }}
          >
// 현재 
		<button
            onClick={() => {
              changelanguageToKo();
              dispatch({ type: 'SET_LANGUAGE', language: 'ko' });
            }}
          >
          

• localstorage에 저장을 하는 dispatch를 써서 사용하였다.

현재 내가 사용하는 프로젝트는 localstorage를 다르게 활용 할 수있으니 각자 맞는 방법으로 사용하시길.

• 버튼을 클릭하면 자유롭게 변경되는 것을 확인했다.
• 이제 다음 차례는 메인 페이지나 그런곳에서 새로고침을 할때 감지하고 다시 change해주는 이벤트가 필요하다.

useNav

  // 새로 고침시 loginform 에서 넘어온 i18n의 값은 초기화가 됨.
  // 그러므로 로컬 스토리지에 저장후 값이 다를때만 로컬스토리지 기준으로 변경.
  const { language } = useMainState();
  const { i18n } = useTranslation();

  if (i18n.language != language) {
    console.log('Refresh detected');
    i18n.changeLanguage(language);
  }
  

• i18n.language는 새로고침 하게 되면 롤백이 되는 문제를 발견하고 language와 다를시
  재변경 해주게 코드를 작성하였다.

결론

• 현재 프로젝트에서는 로컬 스토리지를 다른 방법으로 사용하지만
  결과적으로는 localstorage에서 언어를 저장하고 새로고침시 변경을 감지하여 재변경 해주는 방법으로 해결했다.