React Context API - 페이지 새로 고침 시 데이터 유지

React Context API - 페이지 새로 고침 시 데이터 유지

컨텍스트 프로바이더가 초기 데이터 속성 값과 함께 설정되어 있다고 가정합니다.

예를 들어 소비자가 이러한 속성을 수정했다고 가정해 보겠습니다.

페이지 새로고침 시 이러한 변경은 손실됩니다.데이터 수정을 유지할 수 있도록 데이터를 유지하는 가장 좋은 방법은 무엇입니까?단순한 로컬 스토리지 이외에 다른 방법이 있습니까?

네, 새로고침 후에도 데이터를 유지하려면 API 호출을 통해 서버 측 또는 브라우저 스토리지(로컬 스토리지, 세션 스토리지, 쿠키)에 해당 정보를 저장합니다.사용하는 옵션은 원하는 지속성 수준에 따라 달라집니다.스토리지 선택에 관계없이 다음과 같은 특징이 있을 수 있습니다.

const MyContext = React.createContext(defaultValue);

class Parent extends React.Component {
  setValue = (value) => {    
    this.setState({ value });
  }

  state = {
    setValue: this.setValue,
    value: localStorage.getItem("parentValueKey")
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.value !== prevState.value) {
      // Whatever storage mechanism you end up deciding to use.
      localStorage.setItem("parentValueKey", this.state.value)
    }
  }

  render() {
    return (
      <MyContext.Provider value={this.state}>
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

컨텍스트가 원하는 방식으로 유지되지 않습니다.다음은 React 훅에 상태 비저장 기능을 사용한 샘플입니다.

import React,  {useState, useEffect} from 'react'

export function sample(){
  // useState React hook
  const [data, setData] = useState({})
  const [moreData, setMoreData] = useState([])

  // useState React hook
  useEffect(() => { 
    setData({test: "sample", user: "some person"})
    setMoreData(["test", "string"])
  }, [])

  return data, moreData
}

export const AppContext = React.createContext()

export const AppProvider = props => (
  <AppContext.Provider value={{ ...sample() }}>
    {props.children}
  </AppContext.Provider>
)

이것은, 항구적인 솔루션이 아니고, 회피책이라고 하는 것을 처음부터 이해해 주세요.데이터를 유지하는 것은 클라이언트가 아니라 데이터베이스의 작업입니다.그러나 개발을 위해 지속적인 데이터가 필요한 경우에는 이 방법을 사용할 수 있습니다.리액트 훅을 사용하고 있는 것을 먼저 주목해 주세요.이는 16.8 현재 완전히 지원되는 기능입니다.그useEffect()는 위의 TLadd와 같은 클래스 선언에서 볼 수 있는 라이프 사이클 메서드를 대체합니다.그는 사용하고 있다.componentDidUpdate끈질기게.가장 최신의 방법은useEffect앱이 갱신되면 이 메서드가 호출되어 컨텍스트에서 하드코드된 데이터를 설정합니다.

공급자를 사용하려면:

import React from 'react'
import Component from './path/to/component'
import { AppProvider } from './path/to/context'

const App = () => {
  return (
    <AppProvider>
      <Component />
    </AppProvider>
  )
}

새로고침 할 때data그리고.moreData는 사용자가 할당한 기본값을 그대로 유지합니다.

콘텍스트 설정 및 콘텍스트프로바이더 설정에 대해서는 이미 잘 알고 있다고 생각합니다.

실행할 수 있는 작업 중 하나는 브라우저의 Cookie 또는 사용 가능한 스토리지에 값을 저장한 후 컨텍스트 공급자에서 값을 가져오고 찾을 수 없는 경우 기본값을 설정하는 것입니다.공급자 파일이 클래스 기반 컴포넌트인 경우 에서 이 값을 가져옵니다.constructor()이 이외의 경우는, 를 사용할 수 있습니다.useLayoutEffect()세팅할 수 있습니다.

언급URL : https://stackoverflow.com/questions/53453861/react-context-api-persist-data-on-page-refresh