react 기초(14) - Redux

<설치 방법>

 수정중 - 

 

<Redux> 쓰는 이유 

- 컴포넌트간 state 공유가 편해짐(props 전송 안해됨 ㅎㅎ) 

 

* Redux store에 state 보관하는 법*

저번시간에 만들어둔 store.js 파일 열어서 이렇게 코드짜면 state 하나 만들 수 있습니다.

step 1. createSlice( ) 로 state 만들고 = > usestate()역할임

step 2. configureStore( ) 안에 등록하면 됩니다.

1.state만들기

createSlice( ) 상단에서 import 해온 다음에

{ name : 'state이름', initialState : 'state값' } 이거 넣으면 state 하나 생성가능합니다. 

(createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됩니다)

 

2. state 등록

 configureStore( ) 안에 하면 됩니다.

{ 작명 : createSlice만든거.reducer } 이러면 등록 끝입니다. 

여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능합니다.

 

*Redux store에 있던 state 가져다 쓰는법*

아무 컴포넌트에서 useSelector((state) => { return state } ) 쓰면 

store에 있던 모든 state가 그 자리에 남습니다. * 그냥 공식임 ...외우기 *

변수에 저장해서 진짜로 출력해 보면

이렇게 출력 되는걸 볼수있다.

이렇게 뽑아 쓸수 있다

 

재고라는 state를 하나더 만들고 등록 해준다

=>이렇게 하면 모든 컴포넌트들이 stock 이라는 state를 갖다 쓸수  있게 되는거죠 ㅎㅎ

cart.js 파일에서 console.log(a)하면 나오는결과

=>이렇게 store.js 파일의 stock 이라는 state를 cart.js에 쓰고싶다면 위처럼 가져오면 됩니다!

 

💛useSelector 편하게 쓸려면 💛

user라는 항목만 갖다쓰고 싶음 

stock 이라는 항복만 출력하고싶음

자바스크립트 문법으로 이렇게 축 약해서 써도됩니당

 

데이터 바인딩 하고싶다면 요렇게 쓰면됨 

 

<활용 : 장바구니 만들기>

방법1) 데이터를 state에 보관하고

2) 장바구니 페이지에서 데이터 바인딩

cart만 쓰고 싶으니까 요렇게 가져옴 ㅎㅎ array 자료 나옴

object 자료에서 원하는 데이터 만 뽑을려면 이렇게 해줌

원하는곳에 이렇게 데이터 바인딩 해주면 끝!!

 

상품이 몇백개면 tr을 몇백개 쓰기 힘드니까 cart개수에 맞게 map함수를 써서 코드를 줄여보게씁니다 !

(반복문 쓰면 key 속성 추가해주기!!)

 

store의 state 변경하는 법

1.state를 수정하는 함수를 하나 만들어 주기

 

변경 하고 싶을때 는 ? 

기존state가 필요 하니까 파라미터 추가 해주면됨 

요렇게 해줘도 똑같이 john kim 나옵니당  ㅎㅎ

=>changeName 이라는 함수를 갖다 쓸때마다 reducers 안에있는 state가 john kim으로 실행될것

 

2. 만든함수를 export 해야함 

원할 때 그함수를 실행 해 달라고 stroe.js에 요청

user.action 해주면 안에있던 함수들이 그대로 담기게 된다 

{ } 안에다 export 하고 싶은 함수명들을 { }에 다 적어주면 export 됨 ,,

 

3.만든 함수를 import 해서 사용

 버튼 누르면 state를 kim에서 - > john kim으로 변경하게 만들려면?

아까 export 했던 changeName을 가져오고 dispatch( state변경함수() ) 이렇게 감싸서 실행하면 state 변경됩니다. 

dispatch로 꼭 감싸야 실행됩니다.

출력해보면 버튼 클릭씨 jon에서 john kim으로 변경 되는걸 볼수 있음 ㅎㅎㅎㅎㅎㅎ

 

자..너무 복잡하니까 총정리 한번 해보겠습니다!

1. state 수정 함수를 만든다

2. 수정이 필요하면 store.js한테 수정함수좀 실행해 달라고 부탁하는 식으로 수정한다(dispatch변역 하면

메세지 보내다 라는뜻인다 store.js 한테 메세지 보낸다라는 의미)

+ Cart.js 에서 수정 하는게 아니라 stroe.js에 수정하라고 요청 한다는뜻