[React Native] context API란

반응형

context API 사용하는 이유

React는 기본적으로 Component마다 상태관리를 할 수 있다.

프로젝트 규모가 점점 커지고 복잡해질수록 컴포넌트간의 데이터 전달이 많아지고 복잡해진다.

상태관리 라이브러리를 사용하면 훨씬 쉽게 컴포넌트 간의 상태를 관리 할 수 있다

 

Context API란?

부모부터 자식에게 props를 통해 데이터를 전달하지만,

contex API를 이용하면 트리 단계마다 props를 넘겨주지 않아도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

언제 Context API 사용 하는가?

Global하게 데이터를 공유할 수 있도록 고안된 방법이기 때문에,

비슷한 데이터로는 현재 로그인한 유저(로그인 데이터), 테마, 선호하는 언어 등이 있다.

주의할 점 

전역 데이터를 한 곳에서 저장하고 여러 컴포넌트에서 접근하고 싶은 경우가 아니라면 사용을 안하는 게 좋다.

문서에 따르면 Context를 사용하게 되면 해당 컴포넌트는 해당 Context가 없이는 재사용이 어려워지므로 꼭 필요할 때만 사용하길 권장한다.

 

Context API 기본 코드 예제

React.createContext(defaultValue)

> context 객체를 만들때 사용하는 함수다. > createContext함수를 호출하면 Provider와 Consumer 컴포넌트를 반환한다. > defaultValue는 초기값을 말한다.(Provider를 사용하지 않았을 때 적용될 값)

Context.Provider

> context의 value를 변경하는 역할을 한다. > Provider를 사용할 때에는 value를 꼭 명시해주어야만 동작함으로 주의한다. > 전달받는 컴포넌트의 수는 제한이 없다.

Context.Consumer

> context 변화를 구독하는 컴포넌트를 말한다. > 이 함수(컴포넌트)가 가지는 context값은 가장 가까운 provider의 값이다. > 설정한 값을 불러와야 할 때 사용한다. > 상위 provider가 없다면 createContext()에서 정의한 defaultValue를 가진다.

/**
create context api
use provider to add value
use consumer to use value
*/
import React, {Component} from "react";
import {View, Text, StyleSheet, Button} from 'react-native';

// context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도
// 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다.
// 테마 context의 기본값을 default value로 만든다.
const Context = React.createContext("default value")

export default class App extends Component{
  render(){
    return(
      <View style={styles.container} >

// Context.Provider는 Provider를 이용하여 Context 변경 사항을 하위 트리에 제공한다.
// 아래 예시에서는 parent value를 현재 선택된 context 값으로 보내고 있다.
// value가 parent value이 기 때문에 provider를 이용해 하위 트리에 parent value테마 값을 보내준다.
    <Context.Provider value={"parent value"} >
        <Text style={styles.welcome}>
              Context Api React-Native</Text>
    <Child />
    </Context.Provider>
      </View>
    ); 
}}

class Child extends Component{
  render(){
    return(
      <View style={styles.container} >

// Context.Consumer를 통해 설정한 값을 불러온다.
    <Context.Consumer>
      {value =><Text style={styles.child}>
                      Data is here: {value}</Text>}
    </Context.Consumer>
      </View>
    ); 
}}

const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'#F5FCFF'
  },
  welcome:{
    fontSize: 25,
    textAlign: 'center',
    margin:10,
  },
  child:{
    fontSize: 18,
    textAlign: 'center',
    margin:10,
  },
});

context api 실행화면

반응형