[React Native] 리액트 네이티브에서 전역 상태 관리하는 방법 - Context API, useContext

오늘은 <처음 배우는 리액트 네이티브> 7장 Context API에 대해 알아보겠다 😁

Context API

---

이전 포스트에서 Hooks의 여러 함수를 통해 컴포넌트에서 상태를 관리하는 방법에 대해 알아보았다. Context API는 데이터를 전역적으로 관리하고 사용할 수 있는 기능이다. 이번 포스팅에서는 Context API를 이용해서 상태를 전역적으로 관리하는 방법에 대해 알아보겠다.

1. 리액트 네이티브에서의 전역 상태 관리

일반적인 리액트 네이티브 애플리케이션의 경우 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 하지만 자식 컴포넌트에서는 부모로부터 받은 데이터를 변경할 수 없으므로 데이터를 전달받은 과정의 역순으로 App 컴포넌트(최상위 컴포넌트)에 데이터 변경 요청을 전달해야 한다.

💢 하지만 딱 봐도 위의 방법으로 상태를 관리하면 개발 뿐만 아니라 유지보수에서도 매우 불편할 것이라는 생각이 든다.

✅ 이때 우리는 Context API를 이용해서 Context를 생성해 필요한 컴포넌트에서 데이터를 바로 받아올 수 있다.

2. Context API

Context를 생성해서 전역 상태를 관리하는 방법에 대해 알아보겠다.

createContext 함수

createContext 함수의 파라미터를 지정해서 Context의 기본값을 지정해서 Context를 생성할 수 있다.

const Context = createContext(defaultVaule);

Consumer 컴포넌트

위에서 생성된 Context 오브젝트는 입력된 기본값 외에도 Consumer 컴포넌트와 Provider 컴포넌트를 갖고 있다. Consumer 컴포넌트는 Context의 내용을 읽고 사용할 수 있다.

Consumer 컴포넌트는 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터를 이용한다. 만약 상위 컴포넌트 중 Provider 컴포넌트가 없다면 createContext 함수의 파라미터로 전달된 기본값을 사용한다.

const UserContext = createContext({ name: 'Bemojun Kim'});

export default UserContext;

const StyledText = styled.Text`
    font-size: 24px;
    margin: 10px;
`;

const User = () => {
  return (
    <UserContext.Consumer>
    {value => <StyledText>Name : {value.name}</StyledText>}
    </UserContext.Consumer>
  );
};

export default User;

Consumer 컴포넌트의 자식은 반드시 리액트 컴포넌트로 반환하는 함수여야 하고, 이 함수는 Context의 현재값을 파라미터로 전달받아 데이터를 사용할 수 있다.

Provider 컴포넌트

Context 오브젝트의 Provider 컴포넌트는 하위 컴포넌트에 Context의 변화를 알리는 역할을 한다. Provider 컴포넌트는 value를 받아서 모든 하위 컴포넌트에 전달하고, 하위 컴포넌트는 Provider 컴포넌트의 value가 변경될 때마다 다시 렌더링된다.

💥 Provider 컴포넌트를 사용할 때 반드시 value를 지정해야 하고, Consumer 컴포넌트는 가장 가까운 Provider 컴포넌트가 전달하는 값을 이용한다!

즉 Provider 컴포넌트를 사용하면 Context를 생성할 때 기본값이 아닌 Provider 컴포넌트의 value로 지정된 값이 나온다.

...
const App = () => {
  <UserContext.Provider value={{ name: 'Beomjun' }}>
    ...
  </UserContext.Provider>
  );
};

3. useContext

useContext 함수는 Consumer 컴포넌트의 자식함수로 전달되던 값과 동일한 데이터를 반환한다. 따라서 Consumer 컴포넌트를 사용하지 않고 Context의 내용을 사용할 수 있게 해준다.

Consumer 컴포넌트를 사용할 때는 Consumer 컴포넌트의 자식으로 반드시 리액트 컴포넌트를 반환하는 함수를 넣어야 했다. 따라서 useContext를 이용하면 Consumer 컴포넌트를 사용했을 때보다 훨씬 가독성이 좋아진다.

const User = () => {
  const { user } = useContext(UserContext);
  return <StyledText>Name: ${user.name}</StyledText>;
};
...

...
const Input = () => {
  const [name, setName] = useState('');
  const { dispatch } = useContext(UserContext);

  return (
    <StyledInput
        value={name}
        onChangeText={text => setName(text)}
        onSubmitEditing = {() => {
          dispatch(name);
          setName('');
        }}
        ...
    />
);
};
...

지금까지 상태를 전역적으로 관리하기 위한 Context API에 대해 알아보았다. Context API는 프로젝트의 구조가 복잡하고 많은 컴포넌트가 이용하는 데이터를 전역적으로 관리할 때 사용하는 것이 좋다. 하지만 모든 것이 그렇듯 그 특성에 맞는 상황에서 사용했을 때가 좋지, 무조건 좋은 것은 없다는 거!