React-Context

 

Context로 데이터를 전역으로 관리할 수 있다.

전역으로 데이터를 관리하면 한 컴포넌트에서 업데이트 된 값을 다른 컴포넌트에서도 적용해 얻을 수 있다.

 

props-drilling도 전역으로 데이터 관리를 할 수 있지만 컴포넌트 간의 위치가 아주 분명해야 하고,

넘겨야 하는 children이나 props가 많아질수록 구조를 알아차리기 힘들다.

따라서 유지보수가 힘들게 된다.

 

Context는 props를 넘겨주지 않지만 props-drilling과 유사하므로 컴포넌트간 간격이 큰 값이면 Context로,

컴포넌트 사이가 가까우면 props를 사용하여 혼합해서 사용하면 더 유용하게 사용할 수 있었다.

 

Context를 React에 적용하는 방법

1. context는 컴포넌트이므로 폴더 이름을 대문자로 시작하여 생성한다.

2. 초기값과 같이 변화하지 않는 데이터는 함수 바깥에 쓴다.

3. createContext()로 context를 생성하고 Provider을 생성한다.

값은 children으로 내려 해당 값이 모두 적용할 수 있게 한다.

return의 ThemeContext.Provider의 value값이 다른 컴포넌트들이 받을 수 있는 값이다.

 

4. 앱의 최상위 경로에 Provider를 감싸줘 안에 들어간 컴포넌트가 모두 Provider의 값을 참고할 수 있게 한다.

같은 Provider를 사용했다고 해도 한번에 감싼 것이 아니라 두개로 나누어 감싼다면 각각의 부분끼리 값을 공유한다.

감싸여 있는 경로만 적용할 수 있는 것이다.

 

5. useContext로 Context를 부른다. 구조분해할당으로 내부의 인자를 바로 가져올 수 있다.

useContext 내부에 있는 것은 createContext로 생성한 객체다.