context API

• 전역 상태 관리를 위한 API

• props drilling 방지를 위함.

• 이전 챕터에서 ThemeProvider 와 동일한 기능

• 데이타 말고도 함수도 전역 관리를 할수 있다.

• 공식문서
  https://ko.reactjs.org/docs/context.html

contextAPI 사용 시작

const Context = createContext(기본값)

Provider

• context 의 변화를 하위 컴포넌트에게 알리는 용도

<Context.Provider value={data}>
</Context.Provider>

Consumer

• Provider 가 전달하는 데이터를 받아서 이용하는 용도

<Provider value={}
<Context.Consumer>
  {value => ()}
</Context.Consumer>
<Provider />

export default function App() {
  const UserContext = createContext({ name: 'SangHeon' });
  return (
    <Container>
      <StatusBar style="auto" />
      <UserContext.Consumer>{value => console.log(value)}</UserContext.Consumer>
    </Container>
  );
}

활용

1. context 구성을 잡는다.

/src/context/User.tsx
import React, { createContext, useState } from 'react';
import { ReactElement } from 'react';

// 1. 초기 형태를 잡아준다.
const UserContext = createContext({
  name: '',
  setName: () => {},
});

// 2. Provider의 형태를 재활용할수 있게끔 만들어준다.
const UserProvider = ({ children }: { children: ReactElement }) => {
  const [name, setName] = useState('SangHeon');
  const value = { name, setName };
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

// 3. Consumer의 형태를 재활용할수 있게끔 만들어준다.
const UserConsumer = UserContext.Consumer;

export { UserProvider, UserConsumer };

export default UserContext;

2. 하위 컴포넌트에서 Consumer를 이용하여 context내의 데이터를 활용한다.

/src/components/User.tsx

import React, { useState } from 'react';
import styled from 'styled-components/native';

import { UserConsumer } from '../contexts/User';

const StyledText = styled.Text`
  font-size: 30px;
  font-weight: 600;
`;

const StyledInput = styled.TextInput`
  border: 1px solid #111111;
  font-size: 26px;
  padding: 10px;
  width: 80%;
`;

const User = () => {
  const [text, setText] = useState('');

  return (
    <>
      <UserConsumer>
        {({ name }) => <StyledText>Name: {name}</StyledText>}
      </UserConsumer>
      <UserConsumer>
        {({ setName }) => (
          <StyledInput
            value={text}
            onChangeText={setText}
            onSubmitEditing={() => {
              setName(text);
              setText('');
            }}
          />
        )}
      </UserConsumer>
    </>
  );
};

export default User;

3. 부모컴포넌트에서 Provider 구성을 해준다.

/src/App.tsx

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import styled from 'styled-components/native';
import { UserProvider } from './contexts/User';
import User from './components/User';

const Container = styled.View`
  flex: 1;
  background-color: '#fff';
  align-items: center;
  justify-content: center;
`;

const StyledText = styled.Text`
  font-size: 30px;
  font-weight: 600;
`;

export default function App() {
  return (
    <UserProvider>
      <Container>
        <StatusBar style="auto" />
        <User />
      </Container>
    </UserProvider>
  );
}

useContext

• Consumer 없이 Provider가 제공하는 데이터를 사용할수 있다.

/src/components/User.tsx

import React, { useState } from 'react';
import styled from 'styled-components/native';

import { UserConsumer } from '../contexts/User';

const StyledText = styled.Text`
  font-size: 30px;
  font-weight: 600;
`;

const StyledInput = styled.TextInput`
  border: 1px solid #111111;
  font-size: 26px;
  padding: 10px;
  width: 80%;
`;

const User = () => {
  const [text, setText] = useState('');
  const { name, setName } = useContext(UserContext); // ⭐️⭐️⭐️

  return (
    <>
      <StyledText>Name: {name}</StyledText>
      <StyledInput
        value={text}
        onChangeText={setText}
        onSubmitEditing={() => {
          setName(text);
          setText('');
        }}
      />
    </>
  );
};

export default User;