Context 코드 분리하기
앞에서 만든 코드를 깔끔하게 정리하기
locale State는 LocaleContext를 통해서 전달하고 있다.
지금은 LocaleContext가 App 컴포넌트에 있지만 이것을 다른 컴포넌트에 옮긴다면
locale State에 대한 코드들도 옮겨주어야 한다.
그런데 만약 다른 개발자가 App컴포넌트에 있는 locale State를
지금처럼 localeSelect 컴포넌트에도 직접 참조해서 넘겨주고
새로 만든 어떤 컴포넌트에도 locale를 직접 참조했다고 가정하자.
이것을 모르고 LocaleContext랑 State를 다른 곳으로 옮기면 오류가 난다.
그리고 관련된 코드를 찾아서 다시 고치는데 또 시간이 걸리게 된다.
이럴 때는 locale State와 LocaleContext를 한 곳에서 관리하면 편리할 것이다.
LocaleContext.js 파일 안에
State와 Context.Provider를 함께 사용할 것이다.LocaleProvider라는 컴포넌트를 만들고 props로 children을 받은 다음에
return 값으로는 LocaleContext의 Provider를 children을 감싸서 보여주겠다.그리고 앞에서 사용했던 State 코드도 옮겨준다.
Provider의 value prop으로는 객체를 넘겨줄 것이다.
State값을 바꾸는 것도 반드시 Context를 통해서 하려고
locale값이랑 setLocale 함수를 내려준다.그리고 LocaleProvider 컴포넌트를 사용할 때
기본 locale값을 지정할 수 있어야 하므로
prop으로 defaultValue라는 prop도 추가해준다.
여기에 커스텀 Hook을 추가한다.
매번 useContext랑 LocaleContext를 가지고 사용하는 것은 번거우므로
이것을 대신해줄 useLocale이라는 Hook을 만든다.
useLocale Hook은 locale값을 전달해주고
useSetLocale이라는 Hook은 setLocale값을 가지고 올 때 사용할 것이다.
일단 함수안에서 Context값을 가지고 온다.
이 커스텀 훅을 LocaleProvider 바깥에서 사용하면 context의 값이 없으므로
그런 경우를 위해 Error를 throw해준다.
실수로 Context 밖에서 사용하더라도 이 에러를 통해서 확인할 수 있다.
그리고 return 값으로는 locale값을 넘겨준다.
마찬가지로 setLocale함수도 만들어 준다,
마지막으로 Context의 default export는 지워준다.
App 컴포넌트로 돌아가서 적용하기
LocaleContext.Provider대신에 만든 LocaleProvider 컴포넌트로 바꾸고
defaultValue로는 'ko'문자열을 내려준다.
ReviewList 컴포넌트에 ReviewListItem으로 가서
useContext를 사용하던 것을 useLocale Hook으로 교체한다.
마지막으로 LocaleSelect 컴포넌트에서는
앞에서 prop으로 받아온 것 대신에
커스텀 훅으로 locale과 setLocale을 받아온다.
그리고 App 컴포넌트에서 prop으로 내려주던 것을 지워준다
저장하고 확인해보면
언어값을 변경했을 때 잘 변경되는 것을 확인할 수 있다.
