시작하기

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

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

프로젝트 준비하기

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

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 를 통해서 원하는 값이나 함수를 바로 쏴줄 수 있게 됩니다.