언어가 변경될 때마다 텍스트가 바뀌는 기능 만들기
각 사전에서 단어마다 어떤 번역을 보여줄 지 정해두면
언어가 바뀔 때마다 사전만 바꿔두면 된다.
이런 사전 형태의 자료구조와 리엑트 커스텀 훅, Context를 활용해서 번역기능만들기
hooks 폴더에서 useTranslate.js파일을 만든다.
이 함수에서는 useLocale 커스텀 훅으로 locale값을 가져온다.
1. 사전으로 사용할 객체를 만든다.
.
일단 단어 4개만 만든다.
각각 확인, 취소, 수정, 삭제 버튼에 사용할 번역키들이다.
이것을 가지고 translate라는 함수를 만든다.
이 함수는 파라미터로 key를 받아서
dict객체에 locale에서 key에 해당하는 값을 return한다.
번역키를 받으면 지금 언어에 맞는 단어를 리턴할 함수이다.만약 locale 값이 en이고 delete button이라는 키가 들어오면
Delete라는 문자열을 리턴하게 된다.없는 키값으로 조회할 수도 있으므로 OR 연산자로 빈문자열을 리턴한다.
커스텀훅의 리턴값으로는 translate함수를 리턴한다.
2. ReviewList 컴포넌트로 가서 적용하기
useTranslate Hook으로 translate함수를 가져오고
수정버튼에서는 'edit button'이라는 키로 번역값을 가져온다.
삭제버튼에서는 'delete button'이라는 키로 번역값을 가져온다.
그리고 앞에서 작성했던 locale 관련코드들은 지운다.
3. ReviewForm 컴포넌트에도 적용하기
useTranslate를 가지고 함수를 가져온 다음에 취소버튼, 확인버튼에
'cancle button', 'confirm button'이라는 번역값을 가져온다.
저장하고 확인해보면
한국어 상태에서는 확인, 수정, 삭제 버튼이 잘 보인다.
영어 옵션을 선택하면 잘 바뀌는 것을 확인할 수 있다.
