react Context

Context 

context는  React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법으로, 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 

 

 

React Context API 

리액트에서 상태를 전역적으로 관리하고 컴포넌트 간에 데이터를 공유하기 위한 기능을 제공하는 매커니즘

 

React.createContext

const MyContext = React.createContext(defaultValue);

Context 객체를 만든다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재값을 읽는다.

defaultValue 매개변수는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값이다.

Context.Provider

<MyContext.Provider value={/* 어떤 값 */}>

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다.

 

context 사용 주의사항 

- context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것이므로 context를 사용하면 컴포넌트를 재사용하기가 어려워진다.

 

useContext

React Hooks 중 하나로, Context API에서 생성한 Context를 사용하는 데에 사용

 

참고 Context – React (reactjs.org)

Context – React

 

 

 

실전 활용) 

1. Context 생성: ManagementMenuItem 컴포넌트에서 createContext 함수를 사용하여 새로운 Context를 생성.  Context는 checkdItemsContext로 명명
2. Provider 제공: MenuRoot 컴포넌트에서 checkdItemsContext.Provider를 사용하여 Context의 값을 제공. 여기서 제공하는 값은 checkedItems와 setCheckedItems로 이루어진 객체.
3. Context 사용: useContext 훅을 사용하여 checkdItemsContext의 값을 가져옴. 이를 통해 checkedItems 상태와 setCheckedItems 함수를 가져와서 사용할 수 있음.

 

 

ManagementMenuItem.jsx

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

export const checkdItemsContext = createContext({
  checkedItems: {},
  setCheckedItems: () => {},
});

...
  const checkedItemsContext = useContext(checkdItemsContext);

                <Checkbox
                  checked={checkedItemsContext[item._id]}
                  onClick={() =>
                    checkedItemsContext.setCheckedItems((prevCheckedItems) => ({
                      ...prevCheckedItems,
                      [item._id]: !prevCheckedItems[item._id],
                    }))
                  }
                  itemId={item._id}
                />
                ...

 

MenuRoot.jsx

import { checkdItemsContext } from "../../store/components/ManagementMenuItem";
...
  const [checkedItems, setCheckedItems] = useState({}); // checkedItems 상태 추가

	...
  return (
    <checkdItemsContext.Provider value={{ checkedItems, setCheckedItems }}>
      <div>
        <MenuList items={items} userType={props.userType} />
        <button onClick={handleDelete}>삭제</button>
      </div>
    </checkdItemsContext.Provider>
  );

 

CheckBox.jsx

const Checkbox = (props) => {
  const { defaultChecked, onClick, itemId } = props;
  const [checked, setChecked] = useState(defaultChecked || false);

  const handleClick = () => {
    setChecked(!checked);
    onClick(itemId);
  };

  return (
    <div className="checkbox-container" onClick={handleClick}>
      {checked ? <CheckCircle /> : <CheckCircleOutlined />}
    </div>
  );
};