[react] react-i18next 다국어 처리 줄바꿈(엔터, /br, \n)

react-i18next 다국어처리 방법은 링크를 클릭하면 자세하게 설명되어 있다.

이전 글에서 json 파일로 {"korea":"한국"} 언어를 적용했는데,
번역된 언어가 장문이고, 이를 엔터를 하려면 어떻게 해야할까?

json에서 엔터, /br, \n 모두 적용이 안됐기에 방법을 찾아봤다.

1. 일차원적인 방법으로

처음에는 css의 width 크기를 조정해서 억지로 조정했으나 언어별로 문장의 길이가 다 달랐기에
효과적이지 않았다.

2. 제대로 찾은 방법

 const { t, i18n } = useTranslation()
 
 return{
 	<div>
        {i18n.t('').split("\n").map((line)=>(<div>{line}</div>))}
 	</div> 
 }

를 사용하고 json 파일에서 줄바꿈 할 곳을 찾아 \n을 표시하면 된다.
언어별로 \n을 적용해도 각각 잘 적용이 된다.

줄바꿈은 잘됐으나 갑자기 생긴 에러

Warning: Each child in a list should have a unique "key" prop.

.map 반복문을 사용하다보니 고유 key값이 없다는 오류가 발생하였다.
치명적인 오류는 아니지만 바로 잡지 않으면 신경쓰이는 오류이기에 고유 key값을 넣어 바로 해결했다.

	<div>
        {i18n.t('').split("\n").map((line, idx)=>(<div key={idx}>{line}</div>))}
 	</div> 

해결 완료