contexts라는 폴더를 만들고 LocaleContext.js파일을 만든다.
Context를 만들 때 컴포넌트와 구분하기 좋게 Context라는 이름을 붙인다.
createContext라는 함수로 Context를 만든다.
이 함수는 아규먼트로 Context가 제공할 기본값을 받는다 .
이 것을 LocaleContext라는 값에 저장하고 default로 export해준다.
App컴포넌트로 가서 최상위태그로
LocaleContext.Provider라는 태그로 감싸준다.
이렇게 하면 이 안에 있는 컴포넌트에서는
어디서나 LocaleContext가 제공하는 값을 사용할 수 있다.
value prop으로 공유할 데이터를 지정해주면 된다.
일단 'ko'라는 문자열을 내려준다.
참고로 Provider는 태그로 감싸지만
리액트 프레그먼트처럼 아무것도 렌더링되지 않는다
그리고 나서 이 안에 있는 컴포넌트 중에 ReviewList에 ReviewListItem으로 가서
Context값을 가져온다.
useContext라는 Hook을 사용한다.
원하는 컴포넌트에서 useContext를 사용하면 Context값을 가져올 수 있다.
아규먼트로는 LocaleContext를 넘겨주고 이 값을 locale이라는 변수에 지정해준다.
받아온 언어값을 렌더링해준다.
저장하고 확인해보면
Context Provider에서 내려준 ko라는 문자열이 잘 보이게된다.
정리하기
- createContext로 Context를 만든다.
- Context 객체에서 Provider라는 컴포넌트로 Context의 범위를 지정해준다 .(태그로 감싸주기)
- 공유할 데이터를 value prop으로 내려준다.
- useContext Hook을 사용하면 Context가 공유한 데이터를 가져올 수 있다.
