react / TextProvider, useContext 통해서 다른 파일에 있는 값 화면에 구현하기

 

생성문

npx react-native init sample24 --template react-native-template-typescript

 

생성파일

src 폴더 생성 > 그 안에 component 폴더 생성 >

component폴더안에 CountProvider, First, Second, Third, TextProvider 타입 스크립트 파일 생성

 

TextProvider.tsx

import React, { createContext } from "react";
import { Text } from "react-native";

export const TextContext = createContext({})

interface Props{
    children: JSX.Element

}

export default function TextProvider({ children }:Props){

    const text = "이것은 전달한 값입니다."

    //매개변수 children에 text값을 전달
    return(
        <TextContext.Provider value={text}>
            {children}
        </TextContext.Provider>
    )



}

 

CountProvider.tsx

import React, { createContext, useState } from "react";
import { Text } from "react-native";

export const CountContext = createContext({})

interface Props{
    children: JSX.Element

}

export const CountProvider = ({ children }:Props)=>{

    const [count, setcount] = useState(0)

    return(
        <CountContext.Provider value={[count, setcount]}>
            {children}
        </CountContext.Provider>
    )



}

 

 

Third.tsx

import React, { useContext } from "react";
import { Text, View, Button } from "react-native";
import { CountContext } from "./CountProvider";
import { TextContext } from "./TextProvider";



export default function Third(){

    const [count,setCount]:any = useContext(CountContext)

    const btnClick = () =>{
        setCount( (pcount:any) => pcount+1 )
    }

    return(
        <View>
            <Text>Third Component: 현재 카운트 : {count}</Text>
            <Button title="+1증가" onPress={btnClick}/>
        </View>        
    )

}

 

 

Second.tsx

 

import React, { useContext } from "react";
import { Text, View } from "react-native";
import Third from "./Third";


export default function Second(){
 

    return (
        
        <View>
            <Text>Second Component</Text>
            <Third/>
        </View>
    )

}

 

 

First.tsx

import React, { useContext } from "react";
import { Text, TextComponent, View } from "react-native";
import Second from "./Second";
import TextProvider, { TextContext } from "./TextProvider";

export default function First(){

    return (
           <View>
               <Text>First Component</Text>
                 <Second/>
             </View>
         )


}

 

 

 

App.tsx

import React, { createContext, useContext } from "react";
import { Text, View } from "react-native";
import { CountProvider } from "./src/component/CountProvider";
import First from "./src/component/First";
import TextProvider from "./src/component/TextProvider";

/*
useContext, creatContext
:값 넘기기
*/



export default function App(){


  return(
    <View>
    <CountProvider>
        <First/>
    </CountProvider>
    </View>
  )


}

Second.tsx가 Third.tsx를 전달받고 First.tsx가 Second.tsx를 전달받음

따라서 App.tsx에서 First만 전달받아도 Third,Second의 값을 모두 받을수 있다.

 

 

실행화면

버튼 누르면 숫자가 증가한다.

 

아이콘 정보 사이트

https://ionic.io/ionicons

Ionicons: The premium icon pack for Ionic Framework