Context API

Context API란

 

React로 웹 애플리케이션을 구현할 때, 보통 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 자신이 가지고 있는 상태 정보를 전달합니다. 그런데 자식 컴포넌트들은 또 그들만의 자식 컴포넌트가 존재 할 수 있기 때문에 트리의 뎁스가 깊어진 상태에서 특정 부모의 상태 값을 사용하려 한다면 중간에 있는 컴포넌트는 그 상태값이 필요없음에도 불구하고 계속해서 props를 통해 전달해야하는 효율적이지 못한 상태가 발생하게됩니다.

 

그래서 React에서 마치 그러한 상태값을 전역 변수처럼 만들어서 필요한 컴포넌트에서 가져다 쓸 수 있게끔 만들어 놓은 기능이 바로 Context API입니다. 현업에서 React를 통해 프로젝트를 진행할 때 보통 전역 상태 관리를 위해 사용하는 도구는 Redux, MobX, Recoil등이 있지만, 여기서는 따로 설치없이 사용 가능한 Context API에 대해서 살펴보겠습니다.

 

 

사용법

 

왜 사용하는지, 어떤 상황에서 Context API를 사용하는지 이해가 되셨다면 이제 사용법을 알아볼 차례입니다.

 

먼저 createContext를 import해줍니다. 그리고 createContext()함수를 사용하여 UserContext라는 변수를 export 합니다.UserContext라는 변수는 전역 상태를 사용하고자 하는 컴포넌트에서 가져와서 사용할 것입니다.

 

그리고는 보통의 함수 컴포넌트를 만드는 것처럼 함수를 만듭니다. 여기서는 user라는 객체를 전역적으로 사용해 보려고 하고 있습니다. 함수의 return문에 우리가 생성한 변수.Provider를 사용하여 value에 user를 넘겨주면 {props.children}

즉, UserStore의 하위 자식 컴포넌트 어디서든지 user를 받아다가 사용할 수 있습니다. 

 

최상단 컴포넌트인 App 컴포넌트에서 <UserStore> 컴포넌트를 받아와 위 처럼 자식들을 감쌉니다. 그러면 이제 Temp와 같은 하위 컴포넌트에서 위에서 value로 뿌려주었던 user객체를 받아와서 사용할 수 있는 것입니다. 

 

UserStore의 하위 컴포넌트인 Temp 컴포넌트에서 useContext와 UserContext를 import하고 tmpUser라는 변수를 생성하여 useContext에 UserContext를 넘겨 user라는 전역으로 관리될 수 있는 객체를 tmpUser에 할당합니다. 그러면 이제 Temp 컴포넌트에서 user 객체를 사용할 수 있게 되는 것이지요!

 

 

# 중요

 

한가지 중요한 개념이 있습니다. 위에서 Temp 컴포넌트에서 user.changeJob을 통해 값을 변경하고 있습니다. 이렇게 되면 전역으로 관리되는 user를 구독(context로 사용하는)하는 컴포넌트들은 리렌더링이 일어납니다. 어떻게 생각해보면 당연한 것이, user를 사용하여 렌더링되는 UI가 있었을텐데 그 값이 바뀌었으니 그에 맞게 리렌더링을 해주는 것이죠. 실제로 저도 React로 쇼핑몰을 만드는 프로젝트를 진행 했을 때, 다크모드를 구현하기 위해 Context API를 사용했었습니다. 어디서든 다크모드 아이콘을 클릭하면 실시간으로 화면을 어둡게 리렌더링 해주어야 했기 때문입니다.!