React_Context(Single/Multi)

user-context

import { createContext } from "react";

export const UserContext = createContext("");

App

import { useState } from "react"

import Profile from "./components/Profile"

import {UserContext} from"./store/user-context"

export default function App(){

  const [username, setUsername] = useState("Mike");

  return (

    <>

    <h1>App</h1>

    {/* epxport const UserContex = createContext(""); */}

   

    <UserContext.Provider value={username}>

      <Profile></Profile>

    </UserContext.Provider>

   

    </>

  )

}

 

Greeting

import { useContext } from "react"

import { UserContext } from "../store/user-context"

export default function Greeting(){         //넘겨줄 필요 없음

const username = useContext(UserContext);   //Mike

    return <p>{`${username} provider에서 받음`}</p>;

   

}

 

profile

import Greeting from "./Greeting"

export default function Profile(){

    return <Greeting></Greeting>

}

 

 

 

 

 

 

 

 

 

 

 

user-context / theme-context

import { createContext } from "react";

export const UserContext = createContext("");

 

App

import { useState, useContext, createContext } from "react"

//멀티 context

const UserContext = createContext("unKnown");

const ThemeContext = createContext("dark");

//속성값이 없기 때문에 초기에 마운트된 이후 다시 랜더링되지 않음

function Profile(){

  return(

    <>

     <Greeting></Greeting>

    </>

  )

}

const Greeting= () => {

  const theme = useContext(UserContext);

  const username = useContext(ThemeContext);

  console.log("theme: ", theme, "username: ", username)

  return(

    <>

      <p style={{color: theme === "dark" ? "grey" : "green"}}>

        {`${username}님 안녕하세요?`}

      </p>

    </>

  )

}

export default function App(){

 

  const [name, setName] = useState({username: "mike"});

 

  return(

    <>

      <ThemeContext.Provider value={"light"}>

        <UserContext.Provider value={name}>

          <div>색 비교</div>

          <Profile></Profile>

        </UserContext.Provider>

      </ThemeContext.Provider>

   

    </>

  )

}