Context 값에 State 사용하기
사용자가 언어값을 변경할 수 있도록 할 것이다.
리액트에서는 이럴때 State했다.
1. App컴포넌트에서 locale이라는 State를 만든다.
기본 값으로 'ko'라는 문자열을 내려준다.
그리고 이것을 Context의 value prop으로 내려준다.
2. LocaleSelect라는 컴포넌트를 만든다.
옵션을 선택하면 locale값이 바뀌는 컴포넌트이다.prop으로는 value, onChange prop을 받는다.
return 값으로 select 태그를 추가한다.
이 태그를 사용하면
선택할 수 있는 옵션들을 보여주고 원하는 옵션을 선택할 수 있다.옵션을 선택할 때마다 실행해줄 handleChange라는 함수를 만든다.
이 함수에서는 이벤트 객체를 받아서
onChange prop에다가 e.target.value값으로 넘겨준다.이 함수를 통해서 locale State를 변경할 것이다.
그리고 select 태그에 value prop으로는 부모에게서 받은 value prop을 넘겨주고
onChange prop으로는 handleChange을 넘겨준다.
3. 이 컴포넌트를 App 컴포넌트에 정렬버튼 위에 배치해준다.
value prop으로는 locale을 내려주고 onChange prop으로는 setLocale을 내려준다.
4. 저장하고 확인해보면 언어를 선택할 때마다 값이 잘 바뀐다.
