[ReactNative] 전역 상태 관리, Context API, useContext | 처음 배우는 리액트네이티브 7장

 

 

전역 상태 관리

 

 

• 일반적인 데이터 흐름 : 부모 → 자식 컴포넌트
• 데이터 사용하는 컴포넌트가 많을 시 : 최상위 App 컴포넌트 (상태 관리 - props) → 하위 컴포넌트

 

그러나 props를 이용해 데이터를 전달하는 것은 번거롭다.

 

• 필요한 하위 컴포넌트에 도달하기까지 단계를 많이 거쳐야함
• 부모로부터 받은 데이터는 변경할 수 없으므로 다시 역순으로 변경 요청해야함
• 관리하는 상태 추가, 변경될 시 모든 컴포넌트를 찾아 수정해야함

 

위와 같은 단점이 존재하기 때문에 최상위 컴포넌트에서 전역 상태를 관리하는 것은 불편하다.

 

 

따라서

중간 과정을 거치지 않고 한번에 원하는 데이터를 받아와 사용하기 위해

Context API를 이용할 수 있다.

 

 

 

Context API

 

 

• createContext 함수 : Context 생성, 파라미터에 Context 기본 값 지정

import { createContext } from 'react';

const UserContext = createContext({ name: 'React Native' });

export default UserContext;

 

 

 

1. Consumer 컴포넌트

• 상위 컴포넌트 중 가장 가까운 곳에 있는 Provider 컴포넌트가 전달하는 데이터 이용
• 상위 Provider 컴포넌트가 없으면 createContext 함수 파라미터로 전달된 기본값 사용
• Consumer 컴포넌트의 자식은 반드시 리액트 컴포넌트를 반환하는 함수여야함 => Context 현재값을 파라미터로 받아 테이터 사용

<UserContext.Consumer>
	{value => <StyledText>Name: {value.name}</StyledText>}
</UserContext.Consumer>

 

Consumer 컴포넌트

 

 

2. Provider 컴포넌트

• 하위 컴포넌트에 Context의 변화를 알리는 역할
• value를 받아서 모든 하위 컴포넌트에 전달 => Provider 컴포넌트 value 변경될 때마다 하위 컴포넌트 리렌더링
• (ex. ThemeProvider 컴포넌트 = 최상위 컴포넌트 ▶ theme에 색 지정, 모든 하위 컴포넌트에서 사용 가능)
• value를 전달받는 하위 컴포넌트 수 제한 없음
• 중간 Provider 컴포넌트 존재 시 중간 컴포넌트의 영향을 받음 (가장 가까운 Provider 컴포넌트)

<UserContext.Provider value={{ name: 'React' }}>
    <Container>
    <User />
    </Container>
</UserContext.Provider>

 

Provider 컴포넌트 value 전달

 

 

3. Context 수정

이제 Context의 값을 수정해서 Context를 사용하는 컴포넌트에 변경된 내용을 반영하는 방법을 해보려한다.

 

Provider 컴포넌트 value에 전역으로 관리할 상태 변수와 상태 변경함수를 함께 전달하는 UserProvider 컴포넌트 생성했다.

이전과 다른점은 하위 Consumer 컴포넌트의 자식 함수 파라미터로 상태를 변경하는 함수를 같이 전달한다는 것이다.

 

 

createContext의 기본값도 value와 동일한 형태로 정의해주었다.

+ ( 상위 Provider 컴포넌트가 없 더라도 동작에 문제가 생기지 않도록 형태를 동일하게 맞추는 것이 좋다.)

 

import { createContext, useState } from 'react';

const UserContext = createContext({
    user: { name: '' },
    dispatch: () => { },
});

const UserProvider = ({ children }) => {
    const [name, setName] = useState('React Native');
    const value = { user: { name }, dispatch: setName };
    return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

const UserConsumer = UserContext.Consumer;

export { UserProvider, UserConsumer };
export default UserContext;

<UserConsumer>
	{({ user }) => <StyledText>Name: {user.name}</StyledText>}
</UserConsumer>

 

 

 

이제 세터 함수로 Context 값을 변경하기 위해 Input 컴포넌트를 만들어 주겠다.

 

import React, { useState } from 'react';
import styled from 'styled-components/native';
import { UserConsumer } from '../contexts/User';

const StyledInput = styled.TextInput`
    border: 1px solid #606060;
    width: 250px;
    padding: 10px 15px;
    margin: 10px; 
    font-size: 24px;
`;

const Input = () => {
    const [name, setName] = useState('');

    return (
        <UserConsumer>
            {({dispatch}) => {
                return (
                    <StyledInput
                        value={name}
                        onChangeText={text => setName(text)}
                        onSubmitEditing={() => {
                            dispatch(name);
                            setName('');
                        }}
                        placeholder="Enter a name..."
                        autoCapitalize="none"
                        autoCorrect={false}
                        returnKeyType="done"
                    />
                );
            }}
        </UserConsumer>
    );
};

export default Input

 

 

 

그 결과,

Input에 변경할 name 값을 넣으면 해당 입력값으로 name이 바뀌는 것을 확인할 수 있었다.

 

Context 값 변경

 

 

728x90

 

 

 

useContext

 

 

• Consumer 컴포넌트의 자식 함수로 전달되던 값과 동일한 데이터 반환
• Consumer 컴포넌트 사용하지 않고 Context 내용 사용 가능하게 함
• Consumer 컴포넌트 사용할 때보다 간편하고 코드 가독성도 좋음

 

import React, { useContext, useState } from 'react';
import styled from 'styled-components/native';
import UserContext, { UserConsumer } from '../contexts/User';

const StyledInput = styled.TextInput`
    border: 1px solid #606060;
    width: 250px;
    padding: 10px 15px;
    margin: 10px; 
    font-size: 24px;
`;

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

    return (
        <StyledInput
            value={name}
            onChangeText={text => setName(text)}
            onSubmitEditing={() => {
                dispatch(name);
                setName('');
            }}
            placeholder="Enter a name..."
            autoCapitalize="none"
            autoCorrect={false}
            returnKeyType="done"
        />
    );
};

export default Input

 

 

useContext를 이용해도 위의 실습내용과 동일하게 name 값 수정이 가능한 것을 볼 수 있었다.