리액트 useContext, Context API 사용하기

useContext와 Context API 는 컴포넌트들이 중첩되어서 state 하위, 하위, 하위... 컴포넌트로 보내기 위해 (props drilling)을 피하기 위해서 사용한다.

🔍 Context API와 useContext 사용법

1. createContext를 사용해서 state 보관함 만들어주기

// todo-context.js 파일
import { createContext } from 'react'

const ToDoContext = createContext({ //state 보관함 만들기
    todos: [],
    totalNum : 0,
    addTodo : (todo) => {},
    removeTodo : (id) => {}
})


export default ToDoContext;

먼저 사용할 state를 createContext를 통해서 만들어준다.

2. createContext로 만든 변수를 import 해온후 Provider의 value 값으로 사용한다.

// TodoProvider.js 파일
import React from 'react'
import ToDoContext from './todo-context'

function TodoProvider(props) {
  return (
    {/* 하위 컴포넌트들이 ToDoContext 안에 있는 값들을 사용할 수 있다.
    Provider는 하위 컴포넌트들에게 context 값들의 변화를 알리는 역할을 한다.*/ }
    <ToDoContext.Provider value={ToDoContext}>  
        {props.children} 
    </ToDoContext.Provider>
  )
}

export default TodoProvider

3. state를 사용할 컴포넌트에서 useContext() 를 통해 그 값을 받아온다.

import Card from "./components/Card";
import TodoContainer from "./components/TodoContainer";
import TodoProvider from "./store/TodoProvider";
import ToDoContext from "./store/todo-context";
import { useContext } from "react";

function App() {
  const data= useContext(ToDoContext); // createContext해준 state를 해체해줌

  console.log(data);
  return (
    <>
    <TodoProvider>
    <Card>
    <TodoContainer/>
    </Card>
    </TodoProvider>
    </>
  );
}

export default App;