- 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와 같이 복잡하게 여러 번 거쳐서 전달해야 합니다.
- 하지만 Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아 와서 사용할 수 있습니다.
Context API 사용법
- react의 createContext 함수를 사용
- contexts 폴더 만들어서 관리.
- contexts/color.js
Consumer : state를 props로 받는 것이 아닌 Consumer 컴포넌트를 통해 조회
- Consumer 사이에 중괄호를 열어 함수전달. children이 아닌 함수를 전달한다.
- 직접 변수를 사용하는 곳에 사용
- 파라미터인 value는 ColorContext의 값
Provider를 사용하면 Context의 value를 변경할 수 있습니다. App 컴포넌트를 다음과 같이 수정해 보세요.
- 기존에 createContext 함수를 사용할 때는 파라미터로 Context의 기본값을 넣어 주었지요?
- 이 기본값은 Provider를 사용하지 않았을 때만 사용됩니다.
- 만약 Provider는 사용했는데 value를 명시하지 않았다면, 이 기본값을 사용하지 않기 때문에 오류가 발생합니다.
동적 Context 사용하기. ( Context 업데이트하기 )
- Context의 value에는 무조건 상태 값만 있어야 하는 것은 아닙니다.
- 함수를 전달해 줄 수도 있습니다.
- Context에서 값을 동적으로 사용할 때 반드시 묶어 줄 필요는 없지만, state와 actions 객체를 따로따로 분리해 주면 나중에 다른 컴포넌트에서 Context의 값을 사용할 때 편합니다.
useContext Hook 사용하기
- 리액트에 내장되어 있는 Hooks 중에서 useContext라는 Hook을 사용하면, 함수형 컴포넌트에서 Context를 아주 편하게 사용할 수 있습니다.
- children에 함수를 전달하는 Render Props 패턴이 불편하다면, useContext Hook을 사용하여 훨씬 편하게 Context 값을 조회할 수 있습니다.
정리
- 기존에는 컴포넌트 간에 상태를 교류해야 할 때 무조건 부모 → 자식 흐름으로 props를 통해 전달해 주었는데요.
- 이제는 Context API를 통해 더욱 쉽게 상태를 교류할 수 있게 되었습니다.
- 프로젝트의 컴포넌트 구조가 꽤 간단하고 다루는 상태의 종류가 그다지 많지 않다면, 굳이 Context를 사용할 필요는 없습니다.
- 하지만 전역적으로 여기저기서 사용되는 상태가 있고 컴포넌트의 개수가 많은 상황이라면, Context API를 사용하는 것을 권합니다.