기존에 네비게이션 기능을 사용하지 않을 때는
데이터를 다른 컴포넌트에 전달하기 위해
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 로 사용할 수 있습니다.
'코딩생활 > ReactNative' 카테고리의 다른 글
[React Native] 3-4 새 글 작성하기 (0) | 2023.03.14 |
---|---|
[React Native] 3-3 useContext Hooks 함수 (0) | 2023.03.13 |
[React Native] 3-1 다이어리 앱 만들기 (0) | 2023.03.10 |
[React Native] 2-5 Props로 컴포넌트 스타일 커스터마이징 (0) | 2023.03.09 |
[React Native] 2-4 StyleSheet으로 컴포넌트에 스타일 적용 (0) | 2023.03.08 |
댓글