[React/Next.js] createContext

createContext는 React에서 지원하는 Context API의 메소드 중 하나이다.

 

출처 : React 공식 문서

 

React 또는 Next.js에서 전역 상태(Global State) 관리에는 Redux(Redux Saga)나 Recoil 등을 많이 사용한다.

최근에는 Zustand라는 라이브러리도 떠오르고 있는 것으로 알고 있다.

 

최근에 하는 프로젝트에서는 Recoil를 사용했는데, 난감한 경우가 하나 있었다. 다크 모드 구현을 위해서 어떤 모드인지(라이트인지, 다크인지)에 대한 상태를 담고 있어야 할 필요가 있었다.

Recoil을 사용하자니 _app.tsx가 Recoil Root를 선언하기 때문에 사용할 수가 없었다.

그렇다고 local storage를 사용하자니 Next.js에서 사용하기 때문에 undefined로 정의되는 것으로 인한 버그가 발생할 수 있기 때문에 이 또한 배제하였다.

 

이런 상황에서 Context API를 사용하기 좋은 것 같다. 테마 모드에 관련된 상태를 선언하고, 선언한 상태를 context를 생성하여 Provider를 만든다. 사용이 필요한 곳에서는 useContext 훅을 사용해서 사용한다.

정확히 개념을 파악하고 사용한 것이 아니라 맞게 사용하고 있는 것인지 모르겠지만, 설정이 필요한 별도의 라이브러리가 아닌 React의 자체적인 라이브러리라는 점에서 굉장히 유용하다고 생각한다.

 

기회가 되면 상태 관리 라이브러리를 사용하지 않고 Context API만 사용하는 프로젝트를 만들어봐야겠다는 생각이 들었다.

결국 여러 글들에서 장단점을 설명한 듯 나한테 와닿아야 하니까,,