Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다.
예를 들어 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종규아 있으면 Context API는 리액트 v16.3부터 사용하기 쉽게 많이 개선 되었습니다. 이 기능은 리액트 관련 라이브러리에서도 많이 사용되며 리덕스, 리액트, styled-components등의 라이브러리는 Context API를 기반으로 구현되어 있습니다.
Context API를 사용한 전역 상태 관리 흐름 이해
프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태 관리시 리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리합니다.
▲ 일반적인 전역 상태 관리 흐름
다음과 같이 가정시 G 컴포넌트는 전역 상태를 업데이터시키고, F와 J컴포넌트는 업데이트 된 상태를 렌더링 합니다.
그러면 App 컴포넌트에서는 다음과 같이 상태와 업데이트 함수를 정의해야 합니다.
const [value, setValue] = useState('hello');
const onSetValue = useCallback(value => setValue(value), [ ]);
그리고 App이 지니고 있는 value 값을 F 컴포넌트와 J 컴포넌트에 전달하려면 여러 컴포넌트를 거쳐야 합니다.
F의 경우 App >> A >> B >> F의 흐름이고, J의 경우 App >> H >> J의 흐름입니다.
추가로 G 컴포넌트에 상태 업데이트 함수를 전달할 때도 App >> A >> B >> E >> G와 같이 복잡하게 여러 번 거쳐서 전달해야 합니다.
실제 리액트 프로젝트에서는 더 많은 컴포넌트를 거쳐야 할 때도 있고 다루어야 하는 데이터가 훨씬 많아질 수도 있으므로, 이런 방식을 사용하면 유지 보수성이 낮아질 가능성이 있습니다.
그렇기 때문에 리덕스와 MobX 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 더 편하게 처리하기도 하는데, 리액트 v16.3 업데이트 이후에는 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 사용하지 않아도 전역 상태를 쉽게 관리할 수 있습니다.
밑의 그림과 처럼 기존에는 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달했지만, Context API를 사용하면 Context를 만들어 단 한번에 원하는 값을 받아와서 사용할 수 있습니다.
▲ Context API를 사용한 전역 상태 관리 흐름
