[RN] Context

Context

• context API는 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능입니다.
• styled component가 context API를 이용해 THEME을 애플리케이션 전체에서 사용할 수 있도록 구현된 것

전역 상태 관리

일반적인 리액트 네이티브 애플리케이션의 경우 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 만약 데이터를 사용하는 컴포넌트가 많다면, 최상위 컴포넌트인 App 컴포넌트에서 상태를 관리하여 하위 컴포넌트 어디서 필요로 하든 전달할 수 있게 해야 한다.

• props를 이용하여 데이터를 전달하는 방식이 있지만 번거롭다.
• context API를 사용하여 App 컴포넌트에서 시작해 중간 과정에 있는 컴포넌트들을 거치지 않고 한번에 받아올 수 있다.

// context를 생성하는 createContext 함수는 파라미터에 생성되는 context의 기본값을 지정할 수 있다.
const context = createContext(defaultValue);

Context object

• Consumer
  context의 내용을 읽고 사용한다. Consumer 컴포넌트는 상위 컴포넌트 중 가장 가까운 곳에 있는 provider 컴포넌트가 전달하는 데이터를 사용한다.

• Provider
  context에 있는 provider 컴포넌트는 하위 컴포넌트에 context의 변화를 알리는 역할을 합ㄴ다. provider 컴포넌트는 value를 받아서 모든 하위 컴포넌트에 전달하고, 하위 컴포넌트는 provider 컴포넌트의 value가 변경될 때마다 다시 렌더링된다.

//../components/User.jsx
import React from "react";
import styled from "styled-components/native";
import UserContext from "../contexts/User";

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

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

export default User;

//src/App.jsx

import React from "react";
import styled from "styled-components/native";
import UserContext from "./contexts/User";

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

const App = () => {
return (
<UserContext.Provider value={{ name: "HyunDong" }}>



</UserContext.Provider>
);
};

export default App;

useContext

• useContext 함수는 consumer 컴포넌트의 자식 함수로 전달되던 값과 동일한 데이터를 반환하므로 consumer 컴포넌트를 사용하지 않고 context의 내용을 사용할 수 있게 해줍니다.