시작하기

Context 는 주로 어떤 용도로 사용되나요?

주로, 애플리케이션으로 전역적으로 데이터가 사용되야 할 때 사용됩니다. 이를테면 사용자 로그인 정보, 애플리케이션 설정, 테마, 등 여러종류들이 있겠지요. 기존의 Context API 도 전역적으로 데이터를 관리하는 용도로 사용할 수는 있었지만, 사용성이 조금 불편해서 자주 사용되지는 않았습니다. 주로, 라이브러리에서 많이 사용됐었는데, 여러분들이 익숙할만한 라이브러리들 - redux, react-router, styled-components 등이 기존에 이 Context API 를 기반으로 구현이 되어있었습니다. Context API 가 이번에, 단순히 그런 라이브러리에서 사용되는 용도가 아니라, 일반적인 용도로도 사용하기 용이하게끔 업그레이드 되었습니다.

프로젝트 준비하기

create-react-app 으로 프로젝트를 만들어서 Context API 를 사용할 준비를 하겠습니다!

npx create-react-app context-tutorial

프로젝트를 만들고, 여러분이 좋아하는 에디터로 열고, 개발서버도 실행시키세요.

프로젝트의 최종 코드는 하단 샌드박스에서 확인 가능합니다:

전역적인 상태 관리

어떠한 상태를 프로젝트에서 전역적으로 사용하려면 어떻게 해야 할까요? 만약에 Redux, MobX 같은 라이브러리를 사용하지 않았다면, 아마 이러한 구조와 비슷하게 구현 해야 할 것입니다.

Root 컴포넌트의 state 에는 value 라는 값이 있고, 이 값을 변경시키는 handleSetValue 라는 함수가 있다고 가정해봅시다. value 라는 값은 컴포넌트 F 와 J 에서 보여주고 있고, 이 값을 변화시키는 이벤트는 컴포넌트 G 에서 발생합니다.

이러한 상황에서는, value 값과 handleSetValue 함수를 props 로 하위 컴포넌트한테 전달해주게 됩니다.

예를 들자면, value 값은 Root => A => B => F, Root => H => J 와 같은 형식으로말이죠. 그리고 handleSetValue 값은 Root => A => B => E => G 이렇게 전달이 되겠지요?

뭐, 그정도야, 라고 생각하면서 props 로 쭈욱 내려주는건 큰 문제가 되지 않지만.. 실제 프로젝트에서는 컴포넌트의 깊이가 더욱 깊을수도있고, 다루게 되는 데이터들도 훨씬 많아질 수도 있어서 이렇게만 하면 유지보수성이 낮아질 가능성이 존재합니다.

그렇기에, 우리는 Redux 나 MobX 같은 라이브러리를 사용하죠. 자, 이제는 이러한 라이브러리 없이도, 새로워진 Context API 를 통하여 글로벌 상태 관리를 꽤나 편하게 할 수 있게 됩니다.

대략적, 이러한 구조로 구현을 할 수 있게 되죠.

더 이상 여러 컴포넌트를 거쳐서 값을 전달해주는것이 아니라, Context 를 통해서 원하는 값이나 함수를 바로 쏴줄 수 있게 됩니다.