REACT- Redux2. Store에 state 보관하여 사용해보자.

Store.js를 빼다가 쓰는 법을 알아보자. 그전에 저번 시간에 말했던 것 복습.

Redux를 왜 사용하는가. 

👉 이유는 컴포넌트간에 state공유가 불편할 때 사용한다.

 

redux를 사용하면 redux store.js통 안에 state들을 다 넣고 빼서 사용할 수 있기 때문이다.

그럼 props전송이 필요없는 이점이 있기 때문.

 

리덕스 스토어안에 있던 스테이트들은 모든 컴포넌트들이 직접 통신을 해서 store.js안에 있는 state을 가져가서 쓸 수 있으니 props전송을 안해도된다는 것!

 

그럼 이 store.js 파일에다가 state만드는 법을 알아보자.

 

일단 Store.js 파일안에다가 

createSlice() 쓰고 import해야한다.

 

 

useState와 비슷한 용도임

 

store.js

import {configureStore, createSlice} from '@reduxjs/toolkit';

createSlice({ //useState와 같은 용도
    name : 'user',  // 'state이름',
    initialState :'kim'//실제 state값을 적어줌
})


export default configureStore({
	reducer: {
    }
});

만든 다음, reducer부분에 등록을해야사용이 가능하다.

 

 

| Redux store에 state보관하는 방법

import {configureStore, createSlice} from '@reduxjs/toolkit';

const user = createSlice({
    name : 'user',  // 'state이름',
    initialState :'kim'
})


export default configureStore({
	reducer: {
    	user : user.reducer
    }
});

state하나 만들고 등록을 끝낸 것이다.

이렇게하면 아 state를 갖다가 사용할 수 있다는 것이다. 

 

갖다 써보기 확인해보자.

 

 

| Redux store의 state 꺼내는 방법

Cart.js로 가서 

function Cart(){ 

	useSelector() // Redux의 state를 가져와준다.
   
 	-- 중간 코드 생략 --   
   
}   
export default Cart;

상단에 import잊지말고!

 

 

변수화하여 저장하고 자유롭게 갖다쓰자.

function Cart(){ 

	const reduxGo = useSelector((state)=> {return state }) // Redux의 state를 가져와준다.
   
 	-- 중간 코드 생략 --   
   
}   
export default Cart;

 

 

state 더 만들어보면, 요런식으로 등록,  

const user = createSlice({
    name : 'user',  // 'state이름',
    initialState : {name : 'kim', age : 20}
})

const testNumber = createSlice({
    name : 'testNumber',
    initialState : [10, 11, 12]
})



export default configureStore({
  reducer: {
    user : user.reducer, 
    testNumber : testNumber.reducer
   }
})

 

추가적으로 더 말한다면 useSelector를 편하게 쓰려면 이렇게 사용하는데, 이게

store안에 있는 모든 state라는 것이 되기에 이런 식으로 적고 쓰는 것이 좋다.

const reduxGo = useSelector((state)=> {return state })

const reduxGo = useSelector((state)=> state.testNumber )

 

Redux를 쓰려면 

외부라이브러리 설치, 셋팅문법필요, store에 state를 등록 해야하기 때문에 번거로운 작업이긴한다.

 

 간단한 프로젝트일 경우는 props를 사용하는 것이 낫지만, 

컴포넌트가 30개, 40개 늘어난다면 Redux를 사용하는 것이 더 좋은 방법이 되기 때문이지.

 

근데, 리덕스 쓴다해서 모든 state들을 꼭 Store에 보관할 필요는 없다.

내가 state가 필요하다면 공유가필요없다. 그러면 굳이 store에 저장할 필요없고 그냥 useState를 사용해도된다.