[React Basic] 전역 상태 아키텍처의 시작 ContextAPI

import { createContext } from 'react';
 
const NoticeContext = createContext("아무것도 없습니다.")
 
export default function App() {
  return (
    <NoticeContext.Provider value="전체 단수 점검 안내 (오후 2시 ~ 4시)">
      <BuildingA />
      <BuildingB />
      <Playground />
    </NoticeContext.Provider>
  )
}

const CenterContext = createContext();
 
function CenterProvider({ children }) {
  const [lostItems, setLostItems] = useState([])
  
  const reportLost = (item) => setLostItems(prev => [...prev, item])
  
  const claimItem = (item) => setLostItems(prev => prev.filter(i => i != item))
  
  const value = { lostItems, reportLost, claimItem }
  
  return (
    <CenterContext.Provider value={value}>
      {children}
    </CenterContext.Provider>
  )
}

export default function LostAndFoundDesk() {
  const { lostItems, reportLost, claimItem } = useContext(CenterContext)
  
  return (
    <>
      {lostItems.map(item => <div>{item}</div>)}
    </>
  )
}

function App() {
  const userName = 'chulsoo'
  return <Layout userName={userName} />
}
 
function Layout({ userName }) {
  return <Sidebar userName={userName} />
}
 
function Sidebar({ userName }) {
  return <UserPanel userName={userName} />
}
 
function UserPanel({ userName }) {
  return <UserName userName={userName} />
}
 
function UserName({ userName }) {
  return <p>Welcome, {userName}</p>
}

import { createContext } from 'react'
 
export const UserContext = createContext()

import { UserContext } from './UserContext'
 
export default function UserProvider({ children }) {
  const userName = 'chulsoo'
  
  return (
    <UserContext.Provider value={userName}>
      {children}
    </UserContext.Provider>
  )
}

import UserProvider from './contexts/UserProvider'
import Layout from './components/Layout'
 
export default function App() {
  return (
    <UserProvider>
      <Layout />
    </UserProvider>
  )
}

import { useContext } from 'react'
import { UserContext } from '../contexts/UserContext'
 
function UserName() {
  const userName = useContext(UserContext)
  
  return <p>Welcome, {userName}</p>
}

import { createContext } from 'react'
 
export const CounterContext = createContext()

export default function counterReducer(state, action) {
  if (action.type === 'increment') {
    return state + 1
  }
  if (action.type === 'decrement') {
    return state - 1
  }
  return state
}

import { useReducer } from 'react'
import counterReducer from './counterReducer'
import CounterContext from './counterContext'
 
export default function CounterProvider({ children }) {
  const [state, dispatch] = useReducer(counterReducer, 0)
  
  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  )
}

import CounterProvider from './contexts/CounterProvider'
import CounterScreen from './components/CounterScreen'
 
export default function App() {
  return (
    <CounterProvider>
      <CounterScreen />
    </CounterProvider>
  )
}

import { useContext } from 'react'
import CounterContext from '../contexts/CounterContext'
 
function CounterScreen() {
  const { state, dispatch } = useContext(CounterContext)
  
  return (
    <div>
      <h1>Count: {state}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onCLick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  )
}

export default function authReducer(state, action) {
  switch(action.type) {
    case "LOGIN_START": 
      return { user: null, isLoading: true, error: null }
    case "LOGIN_SUCCESS":
      return { user: action.payload, isLoading: false, error: null }
    case "LOGIN_FAILURE":
      return { user: null, isLoading: false, error: action.payload }
    case "LOGOUT":
      return { user: null, isLoading: false, error: null }
    default:
      return state
  }
}

import { useReducer } from 'react'
import authReducer from './authReducer'
import AuthContext from './AuthContext'
 
export function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
    isLoading: false,
    error: null
  })
  
  return (
    <AuthContext.Provider value={{...state, dispatch }}>
      {children}
    </AuthContext.Provider>
  )
}

import { useContext } from 'react'
import AuthContext '../contexts/AuthContext'
 
export default function LoginButton({ email, password }) {
  const { dispatch, user, isLoading, error } = useContext(AuthContext)
  
  const click = async () => {
    dispatch({ type: "LOGIN_START" })
    
    try {
      // 예시 API 호출
      const res = await fetch('https://api.com/login', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ email, password })
      })
      
      dispatch({ type: "LOGIN_SUCCESS", payload: res.data.userInfo })
      navigateTo("/main")
    } catch {
      dispatch({ type: "LOGIN_FAILURE", payload: "로그인에 실패했습니다."})
    }
  }
  
  return (
    <button onClick={click} disabled={isLoading}>
      {isLoading ? 'Logging in...' : 'Login'}
    </button>
  )
}

import { createContext, useReducer, useMemo } from 'react'
 
export const AuthStateContext = createContext()
export const AuthDispatchContext = createContext()
 
export function AuthProvider({ children }) {
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
    isLoading: false,
    error: null
  })
  
  const memorizedState = useMemo(() => state, [state]) // 메모지에이션
  
  return (
    <AuthDispatchContext.Provider value={dispatch}>
      <AuthStateContext.Provider value={memorizedState}>
        {children}
      </AuthStateContext.Provider>
    </AuthDispatchContext.Provider>
  )
}

// TodoInput.js
import { useContext } from 'react'
import { AuthStateContext } from '../contexts/AuthContext'
import { TodoDispatchContext } from '../contexts/TodoContext'
 
function TodoInput() {
  // 인증 엔진의 데이터 채널에서 유저 정보를 가져옵니다.
  const { user } = useContext(AuthStateContext)
  
  // 업무 관리 엔진의 명령 채널에서 기능을 가져옵니다.
  const todoDispatch = useContext(TodoDispatchContext)
  
  const handleSubmit = (text) => {
    if (!user) {
      alert("로그인이 필요한 서비스입니다.")
      return
    }
    todoDispatch({ type: "ADD_TODO", payload: text })
  }
}

export function useAuthState() {
  const context = useContext(AuthStateContext)
  
  if(context === undefined) {
    throw new Error("useAuthState는 반드시 AuthProvider 안에서만 사용해야 합니다.")
  }
  return context
}

export function useAuthDispatch() {
  const context = useContext(AuthDispatchContext)
  
  if(context === undefined) {
    throw new Error("useAuthDispatch는 반드시 AuthProvider 안에서만 사용해야 합니다.")
  }
  return context
}

const { user, isLoading } = useAuthState()
const dispatch = useAuthDispatch()

export function useTaskState() {
  const context = useContext(TaskStateContext)
  
  if(context === undefined) {
    throw new Error("TaskStateContext는 TaskProvider 안에서만 불러올 수 있습니다.")
  }
  return context
}
 
export function useTaskDispatch() {
  const context = useContext(TaskDispatchContext)
  
  if(context === undefined) {
    throw new Error("TaskDispatchContext는 TaskProvider 안에서만 불러올 수 있습니다.")
  }
  return context
}