본문 바로가기
코딩생활/ReactNative

[React Native] 3-2 Context API

by InfoJun 2023. 3. 13.
반응형

기존에 네비게이션 기능을 사용하지 않을 때는

 

데이터를 다른 컴포넌트에 전달하기 위해

 

Props를 사용했습니다.

 

functionc Couter({ value, conIncrease, onDecrease}) {
	retrun (
    	<View>
        	<Text>{value}</Text>
            <Button title = "+' onPress = {onIncrease} />
            <Button title = "-' onPress = {onDecrease} />
        </View>
    )
}

하지만 지금 만드는 앱의 경우

 

WriteScreen 에서 새로운 글을 작성하면

 

FeedsScreen과 calendarScreen에 변화가 반영되어야 합니다.

 

이럴 때 리액트에 내장된 Context API를 사용하면 Props를 사용하지 않아도

 

특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 됩니다.

 

우선 contexts라는 디렉터리를 만들고 그 안에 LogContext.js파일을 생성하세요.

 

 

contexts/LogContext.js

import {createContext} from 'react';

const LogContext = createContext('안녕하세요');

export default LogContext;

App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RootStack from './screens/RootStack';
import LogContext from './contexts/LogContext';

function App() {
  return (
    <NavigationContainer>
      <LogContext.Provider value={'안녕하세요'}>
        <RootStack />
      </LogContext.Provider>
    </NavigationContainer>
  );
}

export default App;

 

Provider에는 value라는 Props를 설정할 수 있습니다.

 

이 값이 바로 Context를 통해 여러 컴포넌트로 공유할 수 있는 값입니다.

 

screens/FeedsScreen.js

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import LogContext from '../contexts/LogContext';

function FeedsScreen() {
  return (
    <View style={styles.block}>
      <LogContext.Consumer>{value => <Text>{value}</Text>}</LogContext.Consumer>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {},
});

export default FeedsScreen;

 

다음과 같이 수정하면 화면에 안녕하세요가 나타납니다.

Context 안의 값을 사용할 때는 Consumer 컴포넌트를 사용하여야합니다.

 

컴포넌트 태그 사이에 함수를 넣는 것을 Render Props 패턴이라고 합니다.

 

이 것을 이해하려면 리액트 컴포넌트의 children이라는 Props를 이해해야합니다.


children Props는 우리가 Text 컴포넌트에서 사용하는 것처럼

 

컴포넌트 태그 사이에 넣어준 값입니다.

 

Box라는 컴포넌트를 임시적으로 FeedsScreen 내부에 만들어보겠습니다.

 

screens/FeedsScreen.js

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import LogContext from '../contexts/LogContext';

function FeedsScreen() {
  return (
    <View style={styles.block}>
      <Box>
        <Text>1</Text>
      </Box>
      <Box>
        <Text>2</Text>
      </Box>
      <Box>
        <Text>3</Text>
      </Box>
    </View>
  );
}

function Box({children}) {
  return <View style={styles.box}>{children}</View>;
}

const styles = StyleSheet.create({
  box: {
    borderWidth: 2,
    padding: 16,
    borderBottomColor: 'black',
    marginBottom: 16,
  },
});

export default FeedsScreen;

 

이렇게 하면 Box 컴포넌트 태그 사이에 넣은 JSX를 children이라는 Props 로 사용할 수 있습니다.

반응형

댓글