비전공자의 공부일지 - reactContext

반응형

728x90

1. reactContext

---

지금까지 데이터를 보관하거나 자식요소에게 보내는 방식으로 state, props를 사용했는데 이번에는 reactContext를 사용해서 해보려고 한다.

reactContext는 props, state와 다르게 reactContext의 태그에 value값을 준 상태에서 자식요소들에서 따로 선언을 해주지 않아도 바로 사용할 수 있다.

 

    import { createContext, useContext } from 'react';

    const ThemeContext = createContext(null);

    export default function MyApp() {

       return (

            <ThemeContext.Provider value="dark">

                 <Form />

            </ThemeContext.Provider>

        )

    }

 

const theme = useContext(ThemeContext);

 

ThemeContext라는 이름의 createContext를 만들면 ThemeContext에 지정한 값을 그대로 태그로 사용가능하고 거기에 value로 dark라는 값을 주면 자식요소에 useContext를 선언해서 form도 value의 dark의 값을 사용 가능하다. 

이렇게만 보면 state와 props로 데이터를 전달하는 것과 무슨 차이가 있을까 싶지만 추후 프로젝트를 하다 보면 자식요소 안에 자식요소 그 안에 또 자식요소 이런 식으로 props를 전달하게 되면 프로젝트 유지보수 차원에서 너무 불필요한 노동을 요구하게 된다. 그럴 때 사용하는 게 reactContext라고 한다. 

나중에는 redux나 mobx라는 것을 사용한다고 한다. 추후 배우게 될 때 공부를 할 것이다.

 

지금 디자인 없이 Reactcontext를 알기 위해 제품을 선택했을 때 금액이 변경되는 프로젝트를 진행 중인데 여기서 금액 부분을 Context를 사용해서 다양한 컴포넌트, 페이지에서 prop으로 데이터 내려받는 방식의 전달이 아니라 해당 Context를 바로 선언해서 불러오는 방식으로 작업할 예정이다.

 

orderContext.js 파일

import { createContext } from "react";

const OrderContext = createContext();

export function OrderContextProvider({children}){

    return <OrderContext.Provider value >

        {children}

    </OrderContext.Provider>

}

index.js 파일

import OrderContext, { OrderContextProvider } from "./context/OrderContext";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

    <React.StrictMode>

        <OrderContextProvider>

            <App />

        </OrderContextProvider>

    </React.StrictMode>

);

리액트 공식홈페이지에 나온 방식으로 하면

 <ThemeContext.Provider value="dark">

value="값" 이렇게 작성해야 되는데 우리가 context에 전달해야 될 데이터가 많을 수도 있고 하기 때문에 저렇게 export를 이용해서 function을 하나 만들어주고 거기에 하위 컴포넌트를 불러오는 방식으로 진행하였다.

export function OrderContextProvider({children}){

여기서 props.children을 사용해도 되지만 디스트럭팅방식으로 조금이라도 간소화시켜 주었다.

더 간단하게 도 작업이 가능한데 수정하기 귀찮기 때문에 그냥 저렇게 사용하기로 했다.

위에 코드에서 <OrderContext.Provider value >   이렇게 적었지만 추후 작업할 때 value에 어떤 값이 들어갈지 작업을 해주어야 한다 value="값" 이런 식으로

 

    const [orderCounts, setOrderCounts] = useState({

        products: new Map(),

        options: new Map()

    });

    const value = useMemo(() => {

        return [{ ...orderCounts }]

    },[orderCounts])

    return <OrderContext.Provider value={value} {...props} />

이렇게 value값이 들어가게 해야 된다 여기서 useMemo를 사용하였는데 useMemo란? 우리가 컴포넌트에 변화가 생겼을 때마다 데이터를 다시 렌더링 하게 되면 개인 프로젝트할 때는 계산되는 개수가 작아서 괜찮지만 회사에서 큰 프로젝트를 하거나 많은 양의 데이터가 있는데 수치가 바뀌거나 하지 않았는데 다시 계산하게 되면 불필요한 렌더링을 하게 된다. 그럴 때 useMemo를 사용하면 해당 값이 변경될 때만 실행이 됨으로 조금 더 빠르게 페이지 전환이 가능해진다.

 

이번 프로젝트에서는 ReactContext에 대해서만 작업하기 때문에 적을 내용이 Context밖에 없어서 많이 빈약해 보이지만 이제 하나하나 react에 알아가서 재밌는 거 같다.