이 장에서 만드는 앱의 경우, WriteScreen에서 새 글을 작성하면 FeedsScreen과 CalendarScreen에 변화가 반영되어야 합니다. SearchScreen에서는 작성한 글을 검색할 수도 있어야 합니다. 만약 내비게이션을 사용하지 않으면 기능 구현에 필요한 상태와 함수들을 App 컴포넌트에서 선언해 Props를 통해 필요한 컴포넌트에 전달해줬을 텐데요. 내비게이션을 사용하는 중에 이렇게 처리하기는 꽤 복잡합니다.

이럴 때 매우 유용하게 사용할 수 있는 것이 바로 Context API입니다. 이 기능은 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해줍니다. 주로 프로젝트에서 전역 상태를 관리할 때 많이 사용합니다. 이 기능을 프로젝트에 구현하기 전에 사용 방법을 간단히 연습해보겠습니다.

프로젝트에 contexts라는 디렉터리를 만들고 그 안에 LogContext.js 파일을 생성하세요.

contexts/LogContext.js

import {createContext} from 'react';

const LogContext = createContext('안녕하세요');

export default LogContext;

새로운 Context를 만들 때는 createContext 함수를 사용합니다. 이렇게 Context를 만들면 LogContext.Provider라는 컴포넌트와 LogContext.Consumer라는 컴포넌트가 만들어집니다. Provider는 Context 안에 있는 값을 사용할 컴포넌트들을 감싸주는 용도로 사용합니다. 현재 프로젝트로 예를 들면 RootStack 컴포넌트나 App 컴포넌트 내부에서 내용을 감싸주면 됩니다.