리액트 Context로 리덕스 대체하기

전역 상태 관리 도구인 리덕스는 내 기준에서 액션, 리듀서, 디스패치에다 state를 컴포넌트에 props로 전달해주는 것 까지 할게 너무 많아서 귀찮다.

 

리액트 훅스에 context 기능을 알고만 있었지 사용해보진 않고 있었는데 이번에 써보니 너무 좋다.

 

 

사용법

 

- 부모에서 컨텍스트 생성

import "bulma"
import "../public/scss/global.scss"
import React, { useState, createContext } from "react"
import Nav from '../components/Nav'

//컨텍스트 생성
export const AppContext = createContext()

export default function MyApp({ Component, pageProps }) {
  const [sortBy, setSortBy] = useState("recent")
  const [dateSort, setDateSort] = useState("all")
  const [searchName, setSearchName] = useState("")
  const initData = {
    sortBy,
    setSortBy,
    dateSort,
    setDateSort,
    searchName,
    setSearchName,
  }
  return (
    <AppContext.Provider value={initData}>
      <Nav/>
      <Component {...pageProps} />
    </AppContext.Provider>
  )
}

createContext()로 컨텍스트를 만들고 컨텍스트.Provider 컴포넌트로 자식 컴포넌트를 감싸주면 자식 컴포넌트에서 해당 컨텍스트를 사용할 수 있다.

컨텍스트 수정은 컨텍스트 안에 useState로 만든 상태값과 set상태 함수를 넣고 자식 컴포넌트에서 set함수를 꺼내 쓰는 방식임.

 

 

- 자식 컴포넌트에서 사용하기

import React, { useContext } from "react"
import { AppContext } from '../pages/_app'

const SearchBar = () => {
  const {
    sortBy,
    setSortBy,
    dateSort,
    setDateSort,
    searchName,
    setSearchName,
  } = useContext(AppContext)
  return(
  	//JSX 코드
  )
 }

useContext로 만들었던 컨텍스트를 인자로 넣고 호출해서 꺼내쓰면 된다.

 

직계 자식 컴포넌트에만 적용되는 것이 아니라 몇단계 아래에 있는 컴포넌트에서도 바로바로 호출해서 꺼내 쓸 수 있다.

 

내 생각엔 리덕스보다 훨씬 간단하고 쓰기 좋은 것 같다.