리액트 Global State

리액트 Global State 

여러 컴포넌트 간에 상속 없이도 자기가 원하는 컴포넌트에만 공유할수 있는  것을 말한다.

 

데이터를 공유할 컴포넌트 context 를 만든다.

import { createContext,useState } from "react";

export const AdminFlagContext = createContext({});

//사용법
export const AdminFlagProviders =(props) => {
    const {children}=props
    


    //플래그 만들기
    const [isAdmin,setIsAdmin] =useState(false);
    //AdminFlagContext 안에 provider 이 있으으로 감싸면 된다
    return (
        <AdminFlagContext.Provider value={{isAdmin,setIsAdmin}}>
            {children}
        </AdminFlagContext.Provider>
    )
}

 

index 파일

import { AdminFlagProviders } from './components/providers/AdminFlagProviders';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <AdminFlagProviders >
    <App />
    </AdminFlagProviders>

);

 

 <AdminFlagProviders > 로 감싸는다. 그러면 그아래 모든 파일에서 Global State 를 사용할수있게 된다.

 

import { useContext } from "react";
import {Card} from "./components/Card";
import { AdminFlagContext } from './components/providers/AdminFlagProviders';

function App() {
  const {isAdmin,setIsAdmin}=useContext(AdminFlagContext)
  const onClickSwitch = () => setIsAdmin(!isAdmin);
  return (
    <div>
      {isAdmin ? <span>관리자 입니다 </span> :<span>관리자가 아닙니다 </span>}
      <button onClick={onClickSwitch}>전환</button>
      <Card/>

    </div>
  );
}

export default App;

적용할 파일에서 useContext 를 이용하여 데이터를 이용할수 있게 만들수 있다.

이제 여기서 수정한값들은 하위 컴포넌트가 아니어도 변경 된거나 이용할수 있다 .