개인 프로젝트(React) : 지출 내역 리스트 - 6 useContext

Props-drilling => useContext

가이드를 보기 전 일단 내 블로그에 정리한 useContext를 보고 해봤다.

1. context 생성 (ExpenseContext.js)

import { createContext } from "react";

export const ExpenseContext = createContext(null);

 

2. 데이터를 넘겨줄 Router.jsx

import { ExpenseContext } from "../context/ExpenseContext";

const Router = () => {

    const [expenses, setExpenses] = useState(...

    );

    const [listMonth, setListMonth] = useState();

    const expensesList = expenses.filter(expense => {

        return +expense.date.slice(5, 7) === listMonth;

    });

    return (

        <ExpenseContext.Provider value={{

            expenses,

            setExpenses,

            listMonth,

            setListMonth,

            expensesList,

        }}>

            <BrowserRouter>

                <Routes>

                    <Route path='/' element={<Home />} />

                    <Route path='/detail/:id' element={<Details />} />

                </Routes>

            </BrowserRouter>

        </ExpenseContext.Provider>

    )

}

export default Router

props로 전달했던 모든 것들을 Router.jsx에 모아놓고 Provider의 value로 주고 페이지들을 감쌌다.

 

3. 데이터를 전달만 했던 Home, Details 컴포넌트

Home.jsx

import React from 'react'

import AddExpense from '../components/AddExpense';

import ExpenseList from '../components/ExpenseList';

import MonthSelect from '../components/MonthSelect';

const Home = () => {

    return (

        <>

            <AddExpense />

            <MonthSelect />

            <ExpenseList />

        </>

    )

}

export default Home

 

Details.jsx

import React from 'react'

import DetailExpense from '../components/DetailExpense'

const Details = () => {

    return (

        <DetailExpense />

    )

}

export default Details

더이상 props를 전달할 필요가 없기때문에 props를 내려주지 않음

 

4. 메인 페이지, 상세 페이지 하위 컴포넌트들

4-1. 지출 폼

import { ExpenseContext } from '../context/ExpenseContext';

const AddExpense = () => {

    const { setExpenses } = useContext(ExpenseContext);

ExpenseContext를 import하고 기존에는 props로 전달받은 setExpenses 함수를 ExpenseContext에서 가져옴

 

4-2. 월 선택

import { ExpenseContext } from '../context/ExpenseContext';

const MonthSelect = () => {

    const { setListMonth } = useContext(ExpenseContext);

선택한 월을 변경하는 setListMonth를 가져와서 사용

 

4-3. 지출 리스트

import { ExpenseContext } from '../context/ExpenseContext';

const ExpenseList = () => {

    const { expensesList } = useContext(ExpenseContext);

선택한 월로 가공한 리스트를 가져와서 사용

 

4-4. 지출 상세 페이지

import { ExpenseContext } from '../context/ExpenseContext';

const DetailExpense = () => {

    const { expenses, setExpenses } = useContext(ExpenseContext);

조회 및 수정, 삭제를 위한 expenses, setExpenses를 가져와서 사용

 

가이드도 봤는데 엄청나게 큰 차이는 없는 것 같아서 일단 여기까지

 

기능들은 똑같이 잘 작동한다.

props-dilling을 쓸 때는 props가 필요없는 컴포넌트인데도 전달을 위해서 일일이 받고 내려주고 하는 것도 번거롭고  작성하면서도 헷갈렸던 것 같다.

근데 context를 사용하니까 확실히 props-dilling보다 코드가 보기도 좋고 처음부터 context를 사용했다면 더 편하게 작성했을 것 같다.