React : 리덕스 설정 및 useSeletor

0. State

(1) Local State (지역상태) : 컴포넌트에서 useState를 이용해서 생성된 state

(2) Global State (전역상태) : 중앙 state 관리소 (props로 전달하지 않아도 사용 가능함)

 

1. 리덕스란?

- "중앙 state 관리소"를 접근&제어 가능한 패키지(라이브러리) => yarn | npm으로 설치해야함

- 전역상태를 관리한다

 

2. 리덕스 설정

(1) 터미널에서 패키지 설치

: yarn add redux & yarn add react-redux 2개 설치

=> yarn add redux react-redux

 

(2) src 폴더 아래 redux 폴더 생성 

(3) redux 폴더 안에 config 폴더 /  modules 폴더 생성 (redux 폴더 : 리덕스 관련 코드 모두 넣기)

(3-1) config 폴더 : configStore.js 파일 생성 (중앙 데이터 관리소 = Store) (config 폴더 : 리덕스 설정 파일 전부)

[ configStore.js ]

import { createStore } from 'redux';

import { combineReducers } from 'redux';

import counter from '../modules/counter';

//리듀서들을 하나로 묶는 역할

const rootReducer = combineReducers({

    counter: counter,

});

const store = createStore(rootReducer);

export default store;

 

[index.js]

import store from './redux/config/configStore';

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

root.render(

    <Provider store={store}>

        <App />

    </Provider>

);

▶ Provider : Store를 기반으로 지배권 행사 -> App 컴포넌트 있는 전체에서 store 사용 가능

▶ Provider 옵션으로 store을 넣어주기.(store는 configStore에서 선언한 값을 가져와야함) 

 

(3-2) modules 폴더 : state의 그룹!  

[counter.js]

//초기 상태값( state)

const initialState = {

    number: 0,

};

 

//리듀서 : 'state에 변화를 일으키는' 함수

// (1) state를 action의 type에 따라 변경하는 함

 

//인자 : input = state(객체) + action (객체)

//기본형태

//const counter = (state, action) => {};

const counter = (state = initialState, action) => {

    switch (action.type) {

        default:

            return state;

    }

};

export default counter;

 

▶ 초기 상태값 (state) : useState()로 따지면 => const [number,setNumber ] = useState(0); <-이 초기값 부분

 

 

(4) Redux Hook : useSeletor (데이터 가져오는 기능)

[App.js]

import { useSelector } from 'react-redux';

import './App.css';

function App() {

    //store에 접근하여, counter의 값을 읽어오고싶음 (useSeletor)

    //기본 형태 : useSelector(()=>{});

    //state = 중앙저장소 전체의 state => counter, user,, 등등

    const data = useSelector((state) => {

        return state;

    });

    console.log(data);

    return <div>hello</div>;

}

export default App;

▶ state = 모든 state값이여서 현재는 1개있지만 , 예를 들어counter,users 등 2개 있으면 2개 모두 출력

▶ 그때는 return state.counter로 출력하면 됨