React Hooks useContext와 createContext

Para poder hacer uso de este hook de React es necesario implementar 3 sencillos pasos. Lo Primero sería crear un archivo donde vivirá el contexto para toda nuestra aplicación, para este ejemplo lo llamaremos Contexto.jsx.
Hacemos la importación de los hooks a utilizar para este ejemplo

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

상황에 대한 정의

const Appcontext = createContext({
  items:[],
  create:()=>{}
})

Dentro estamos nombrando las operaciones que van a vivir dentro del contexto las cuales van a poder ser accedidas desde los otros componentes.

구현

export default function Contexto({children}){
  const [items,setItems]= useState([
    {
      id: 0,
      title: 'empezar'
    },
    {
      id:1,
      title: 'terminar'
    }
  ])

  function create(item){
    setItems([...items,item])
  }

  return(
    <AppContext.provider
    value={{
      items,
      create,
    }}
    >
      {children}
    </AppContext.provider>
  )
}

Va a recibir como prop la palabra children que hace referencia a los hijos que va a contener en este caso la función contexto.
Dentro del mismo archivo que estamos trabajando vamos a crear la función que va a contener los metodos y operaciones que se quieran llevar a cabo y que serán ejecutadas desde los componentes que necesiten acceder a ellas.
Por ultimo en el return hacemos el llamado a para pasar como props la información del componnete y el quien dibujara los elementos contenidos.

Adicionalmente podemos crear una función que haga el llamado a el contexto para con esto únicamente tener que invocarla dentro de los componnetes que necesiten acceder a la información.

export function useAppContext(){
  return useContext(Appcontext)
}

Contexto.jsx y envolvemos dentro de este al componente que queramos que tenga acceso a lo establecido dentro de Contexto.jsx, en este caso será el componente Todo

import Todo from './components/Todo'
import {Contexto} from './components/Contexto'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h2>Provider</h2>
      <Contexto>
        <Todo/>
      </Contexto>
    </div>
  )
}

export default App

구성 요소 Todo.jsx를 최종적으로 가져오고 useAppContext를 가져오면 컨텍스트를 수정하고 액세스할 수 있습니다.

import Todo from './components/Todo'
import {Contexto} from './components/Contexto'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <h2>Provider</h2>
      <Contexto>
        <Todo/>
      </Contexto>
    </div>
  )
}

export default App

👽 Espero sea útil esta información, no olvides dejar tu comentario y dar like :)👽

👀👀👀👀También pueden seguirme en tiktok 👀👀👀👀