컨텍스트 API 반응

얘들아!

제 이름은 Gustavo Scarpim입니다. 프로젝트에 Context Api를 간단하고 빠르게 추가하는 방법을 알려드리겠습니다.

1º src 폴더 안에 context라는 폴더를 만듭니다. 예를 들면 다음과 같습니다.



2º 내부 인덱스에서 글로벌 컨텍스트를 생성합니다. 예를 들면 다음과 같습니다.

import React from "react"

import { ColorDefaultContextProvider } from "./template/components/colors"

const GlobalContext = ({ children }) => {
  return (
    <>
      <ColorDefaultContextProvider>{children}</ColorDefaultContextProvider>
    </>
  )
}

export default GlobalContext

3º 내 상태를 구분하기 위해 구성 요소라는 폴더를 만들었습니다. 내 colors.js 폴더에서 색상과 관련된 전역 상태를 모두 만들고 localStorage 값을 가져오지만 올바른 것은 API에서 데이터를 가져오는 것입니다.
아래의 예는 "컨텍스트의 패턴"입니다. 작동하는 아래 코드에 있는 이 단계를 따르십시오.

import React, { createContext, useState } from "react";

const colorCard = localStorage.getItem('colorCard')
const colorBackAvatar = localStorage.getItem('colorBackAvatar')
const colorTitle = localStorage.getItem('colorTitle')
const colorSubTitle = localStorage.getItem('colorSubTitle')

const DEFAULT_VALUE = {
  state: {
    colorCard: colorCard,
    colorBackAvatar: colorBackAvatar,
    colorTitle: colorTitle,
    colorSubTitle: colorSubTitle
  },
  setState: () => { },
};

const Context = createContext(DEFAULT_VALUE);

const ColorDefaultContextProvider = ({ children }) => {
  const [state, setState] = useState(DEFAULT_VALUE.state);
  return (
    <Context.Provider
      value={{
        state,
        setState,
      }}
    >
      {children}
    </Context.Provider>
  );
};

export { ColorDefaultContextProvider };
export default Context;

4º 마지막으로 구성 요소에서 사용할 컨텍스트를 가져옵니다. 여기에서 전역 상태를 호출하고 편집하는 방법을 보여줍니다.

import React, { useContext, useRef } from 'react'
import * as S from './styles/custom'

import ContextColors from '../context/template/components/colors'

export default function Custom() {
  const { setState: setGlobalState } = useContext(ContextColors)
  const { state } = useContext(ContextColors);

  const colorCard = useRef(state.colorSubTitle)

  const handleChangeColorBackCard = (e) => {
    setTimeout(() => {
      //Here I’m taking all the state I have in my 
      // context and I’m changing a specific state, 
      // then save it in localStorage
      //(not required to save in localStorage)
      setGlobalState({ ...state, colorCard: e.target.value })
      localStorage.setItem('colorCard', state.colorCard)
    }, 300)
  }

  return (
    <S.Container>

      <S.ContentColor>
        <input ref={colorCard} defaultValue={state.colorCard}
          type={'color'} onChange={(e) => handleChangeColorBackCard(e)} />
        <S.Label>Background card</S.Label>
      </S.ContentColor>

    </S.Container>
  )
}

5º 가장 중요한 것은 컨텍스트가 애플리케이션 전체에서 작동하려면 기본 인덱스로 가져와야 한다는 것입니다.

import React from 'react';
import ReactDOM from 'react-dom';
import Context from './context';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Context>
      <App />
    </Context>
  </React.StrictMode>,
  document.getElementById('root')
);

준비가 되면 컨텍스트 API를 프로젝트에 적용했습니다.



프로젝트 작동 참조:



여기 GitHubClick here에서 전체 코드를 참조하십시오.

작동 중인 프로젝트를 확인하십시오Deploy.

읽어 주셔서 감사합니다.