리액트 숙련주차 개인과제 5일차

어제까지 작성했던 코드들은 context와 redux를 사용하지 않고 기능을 구현한 것이다. 깃헙에 각각 props-drilling, context, redux 브랜치를 만들어 리팩토링하는 방식으로 진행했다.
오늘은 context api로 리팩토링을 하고, 그 후 redux를 사용하여 다시 리팩토링을 해보았다.

1. context api로 리팩토링

Context폴더 안에 context.js파일을 만들어 코드를 작성해주었다.

최상위폴더 App.jsx에 Context를 import 해주고 Context.Provider를 이용하여 value값을 내려주었다.

value값이 필요한 곳에서 Context를 import 해와서 사용했다.

=> 이렇게 하면 이 데이터가 필요없는 자식컴포넌트에게 불필요한 전달을 하지 않을 수 있다.

2. redux를 이용하여 리팩토링

redux를 사용하려면 먼저 vscode 터미널에서 명령어를 입력해서 2개의 패키지를 설치해야한다.

yarn add redux react-redux

# 같은 의미
yarn add redux
yarn add react-redux

그리고 폴더구조를 생성한다.

src/configStore.js 에 다음 코드를 작성한다.

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store; 

index.js에 다음 코드를 작성한다.

이제 modules 폴더에 필요한 state를 만들고 Reducer를 생성한다.

모듈을 스토어에 연결하여 사용한다.

여기서 useSelect는 컴포넌트에서 스토어를 조회할 때 사용한다!
dispatch는 action객체를 인자로 받아 Reducer를 호출한다!