app-wide state 관리 context / redux 사용

context

store 폴더 생성 -> context와 redux 차이를 알기 위해 폴더 두개를 생성한다.

favorites-context.js 생성

FavoritesContextProvider을 만들어주고 children을 props로 받아서 어떤 컴포넌트와도 상호작용 가능하도록 생성한다.

function FavoritesContextProvider({children}) {
    const [favoriteMealIds, setFavoriteMealIds] = useState([]);

    function addFavorite(id) {
        setFavoriteMealIds((currentFavIds) => [...currentFavIds, id]);
    }

    function removeFavorite(id) {
        setFavoriteMealIds((currentFavIds) => currentFavIds.filter((mealId) => mealId !== id));
    }

    return (
        <FavoritesContext.Provider
            value={{
                ids: favoriteMealIds,
                addFavorite: addFavorite,
                removeFavorite: removeFavorite,
            }}
        >
            {props.children}
        </FavoritesContext.Provider>
    );
}

그 후에
App.js에서 StatusBar를 빼두고는 전부 FavoritesContextProvider 포함시켜 연결되도록 한다.

후에 context state를 사용하고자 하는 page에서 상태를 import 하도록 한다.

 const favoriteMealsCtx = useContext(FavoritesContext);
 이미 favorites-context.js 에서 export 한 FavoritesContext

이러면 사실 다 끝난거다. 이미 js파일에서 설정한 함수들을 context만 import 하면 사용이 가능하다.

  const favoriteMealsCtx = useContext(FavoritesContext);

  function changeFavoriteStatusHandler() {
    if(mealIsFavorite) {
      favoriteMealsCtx.removeFavorite(mealId);
    } else {
      favoriteMealsCtx.addFavorite(mealId);
    }
  }

redux

redux 사용을 위해선 라이브러리 우선 설치

App.js 에서
import { Provider } from "react-redux";

Provider로 모든 상호작용하고자 하는 컴포넌트들을 묶어준다.

store 와 slice를 각각 만들어준다.

const favoriteSlice = createSlice({
    name: 'favorites',
    initialState: {
        ids: []
    },
    reducers: {
        addFavorite(state, action) {
            state.ids.push(action.payload);
        },
        removeFavorite(state, action) {
            state.ids = state.ids.filter(id => id !== action.payload);
        }
    }
})