React Hooks를 사용한 상태 관리

여기에서는 React Hooks를 사용한 상태 관리를 소개할 동영상을 기반으로 합니다.

상태 관리란 어떤 구성 요소에도 속하지 않지만 공급자 구성 요소 내부에서 생성되는 공유 상태를 생성하는 것을 의미합니다. 이를 위해서는 컨텍스트를 만들어야 합니다. 다음은 상점을 처리하는 데 필요한 모든 것을 제공하는 유용한 기능입니다.

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

const makeStore=(initialValue)=>{
    const context=createContext()

    const StoreProvider=({children})=>{
      const ctxValue=useState(initialValue)
      return <context.Provider value={ctxValue}>{children}</context.Provider>
    }

    const useStore=()=>useContext(context)
    return {useStore,StoreProvider}
  }

  export default makeStore

보시다시피 이 함수는 useState 후크를 사용하여 공급자 구성 요소 내부에서 상태를 선언합니다. 대신 useReducer를 사용하려면 다음과 같이 할 수도 있습니다.

import {useReducer,createContext,useContext} from 'react'

const makeStoreBis=(reducer,initialValue)=>{
    const context=createContext()

    const StoreProvider=({children})=>{
      const ctxValue=useReducer(reducer,initialValue)
      return <context.Provider value={ctxValue}>{children}</context.Provider>
    }

    const useStore=()=>useContext(context)
    return {useStore,StoreProvider}
  }

  export default makeStoreBis

이 마지막 경우에는 리듀서 함수와 state에 대한 initialValue를 제공해야 합니다.

이 유틸리티 기능을 어떻게 사용합니까? 글쎄, 우리는 우리가 제공하려는 상점에 대해 더 구체적으로 정의된 것을 기반으로 다른 유틸리티 기능을 정의할 수 있습니다. 예를 들어 카운터 앱의 상태를 관리하고 싶다고 가정해 보겠습니다. 이를 위해서는 상점이 필요합니다.

import makeStore from './makeStore'

const makeCounterStore=(initialValue)=>{
const counterStore= makeStore(initialValue)

const {useStore,StoreProvider:CounterProvider} = counterStore

const useCounter=()=>{
    const [counter]=useStore()
    return counter
}

const useIncrement=()=>{
    const [,setCounter]=useStore()
    return ()=>setCounter(counter=>counter+1)
}

const useDecrement=()=>{
    const [,setCounter]=useStore()
    return ()=>setCounter(counter=>counter-1)
}

return {CounterProvider,useCounter,useIncrement,useDecrement}
}

export default makeCounterStore

여기에 makeCounterStore 유틸리티 함수가 있습니다. 상태에 대한 초기 값만 필요합니다. 다른 버전의 makeStore(makeCounterStoreBis 후크를 사용하는 함수)를 사용하는 useReducer 함수를 정의할 수도 있습니다.

import makeStoreBis from './makeStoreBis'

export const INCREMENT='INCREMENT'
export const DECREMENT='DECREMENT'

const getIncrement=()=>({type:INCREMENT})
const getDecrement=()=>({type:DECREMENT})

const makeCounterStoreBis=(reducer,initialValue)=>{
const counterStore= makeStoreBis(reducer,initialValue)

const {useStore,StoreProvider:CounterProvider} = counterStore

const useCounter=()=>{
    const [counter]=useStore()
    return counter
}

const useIncrement=()=>{
    const [,dispatch]=useStore()
    return ()=>dispatch(getIncrement())
}

const useDecrement=()=>{
    const [,dispatch]=useStore()
    return ()=>dispatch(getDecrement())
}

return {CounterProvider,useCounter,useIncrement,useDecrement}
}

export default makeCounterStoreBis

보시다시피, 이 마지막 사례에서 makeCounterStoreBis 함수는 매개변수로 제공될 리듀서와 상태에 대한 초기 값이 필요합니다.

보시다시피 두 경우 모두 해당 특정 종류의 상점(이 경우 '카운터' 유형의 상점)을 처리하기 위해 API를 정의하고 있습니다. API는 두 경우 모두 동일합니다.

이제 상점을 만들어 앱에서 사용할 차례입니다.

상태에 대한 초기 값만 필요한 makeCounterStore 를 사용하여 시작하겠습니다.
App 구성 요소에서 사용하는 방법은 다음과 같습니다.

import counterStore from './stores/counter'
import Counter from './components/Counter'

const {CounterProvider}=counterStore

function App() {
  return (
    <CounterProvider>
        <Counter />
    </CounterProvider>
  );
}

export default App;

보시다시피 ./stores/counter에서 생성된 스토어를 가져오고 있습니다. 이 파일의 내용을 살펴보겠습니다.

import makeCounterStore from "../utils/makeCounterStore"

export default makeCounterStore(0)

makeCounterStore(0)를 호출하여 새 상점을 인스턴스화하고 있습니다(상태의 초기 값은 0).
App 구성 요소로 돌아가면 Counter 구성 요소를 어떻게 사용하는지 알 수 있습니다. counter 구성 요소는 다음과 같습니다.

import counterStore from '../stores/counter'

const {useCounter,useDecrement,useIncrement}=counterStore

function Counter(){
    const counter=useCounter()
    const increment=useIncrement()
    const decrement=useDecrement()

    return <div>
        <button onClick={increment}>+</button>{counter}<button onClick={decrement}>-</button></div>
}

export default Counter

카운터 앱을 시작하고 후크로 관리 상태(공유 상태)를 실행하는 데 필요한 전부입니다.
makeCounterStoreBis 로 생성된 카운터 저장소의 버전 2를 사용하고 싶다고 가정해 보겠습니다. 이 경우 감속기 기능을 제공해야 합니다. 그러나 먼저 App 구성 요소가 어떻게 변경되는지 살펴보겠습니다.

import counterStore from './stores/counterBis'
import Counter from './components/Counter'

const {CounterProvider}=counterStore

function App() {
  return (
    <CounterProvider>
        <Counter />
    </CounterProvider>
  );
}

export default App;

보시다시피 이전과 같이 ./stores/counterBis 대신 ./stores/counter에서 카운터 저장소를 가져오는 것을 제외하면 이전과 정확히 동일한 구성 요소입니다. 이제 counterBis 파일(스토어를 생성하는 파일)을 살펴보겠습니다.

import makeCounterStoreBis,{INCREMENT,DECREMENT} from '../utils/makeCounterStoreBis'

const reducer=(counter,action)=>{
    switch(action.type){
        case INCREMENT:
            return counter+1
        case DECREMENT:
            return counter-1
        default:
            return counter
    }
}

export default makeCounterStoreBis(reducer,0)

이 파일에서 카운터 저장소를 인스턴스화합니다. makeCounterStoreBis로 전달될 리듀서와 이 저장소의 초기 상태( 0 )도 정의합니다.

이것으로 store 버전 2로 상태를 관리하는 데 필요한 모든 것이 있습니다. Counter 구성 요소는 이제 stores/counterBis 대신 stores/counter에서 저장소를 가져오지만 두 저장소가 동일한 API를 사용하여 상호 작용하기 때문에 나머지는 동일합니다.

import counterStore from '../stores/counterBis'

const {useCounter,useDecrement,useIncrement}=counterStore

function Counter(){
    const counter=useCounter()
    const increment=useIncrement()
    const decrement=useDecrement()

    return <div>
        <button onClick={increment}>+</button>{counter}<button onClick={decrement}>-</button></div>
}

export default Counter

이상으로 제 글 소개를 마치겠습니다. 당신이 그것과 그것에서 논의된 주제를 좋아하기를 바랍니다. 감사.