2.React-Native(리액트 네이티브) SharedData(Context) -2

 Context 를 이용한 데이터의 공유는 read-only 가 아니다. 즉 어디서든 Context 를 이용해서 Data를 불러올 수 있고, 동시에 어디서든 Context 의 값을 변경할 수 있다는 것이다.

UpdateSharedContext.js

import React, { createContext, useState } from "react";

export const StatusContext = createContext();

export function StatusProvider({ children }) {
  const value = useState("init status");

  return (
    <StatusContext.Provider value={value}>{children}</StatusContext.Provider>
  );
}

Context를 이용해서 Provider를 만들어 주는데, Context 의 value를 state값으로 세팅해준다.

그러면 이  state값을 변경하는 setState로 Provider 의 value를 바꿔줄 수 있을 것이다.

IpdateContextStatus.js

import React, { Fragment, useContext } from 'react';
import { StatusContext } from './UpdateSharedContext';

function SetStatus() {
  const [status, setStatus] = useContext(StatusContext);
  return <input value={status} onChange={e => setStatus(e.target.value)} />;
}

export function Status() {
  const [status] = useContext(StatusContext);
  return <p>{status}</p>;
}

export function Page1() {
  return (
    <Fragment>
      <h1>Page 1</h1>
      <SetStatus/>
      <Status/>
    </Fragment>
  );
}

export function Page2() {
  return (
    <Fragment>
      <h1>Page 2</h1>
    </Fragment>
  );
}

export function Page3() {
  return (
    <Fragment>
      <h1>Page 3</h1>
      <SetStatus />
    </Fragment>
  );
}

 

App.js

import React, { Fragment,useState,useEffect } from 'react';
import NewComponent from './SharedContextComponent/NewComponent';
import { SharedContextProvider } from './SharedContextComponent/SharedContext';
import { Page1, Page3, Status,Page2 } from './UpdateContextComponent/UpdateContextStatus';
import { StatusProvider } from './UpdateContextComponent/UpdateSharedContext';

const App =()=>{

  return(
    <StatusProvider>
      <Page1/>
      <Page2/>
      <Page3/>
    </StatusProvider>
    )

}
export default App

이렇게 StatusProvider를 App.js 에서 사용하면 각 Page들에서는 value로 사용된 state를 이용할 수 있다.

page 1의 setStatus 는 Provider의 state를 불러와 state 값으로 사용하고,setSttatus는 proivder의 value를 변경한다.

그리고 이렇게 변경된 state는 Status() 함수를 통해 Context에 저장된 state 값을 화면에 보여준다.