[React] Redux를 이용해 State 저장, 사용해보자
Redux 쓰는 이유가 뭐라고??
💡Redux store에 state 보관하는 법
createSlice 를 store.js에 import 해준다. (useState() 역할을 한다.)
Redux 에서 state 하나를 slice 라고 부른다.
이러한 구조로 이루어져 있음.
createSlice 로 선언하고 나서 state의 이름과 초기값을 설정해 준 후에
configureStore에 넣어서 등록을 해줘야 한다. (정확한 규격에 맞춰서)
등록을 할 때 createSlice를 변수에 저장을 해준다.
createSlice 내부의 name 은 라이브러리 내부적으로 쓰는것
각 createSlice의 name은 서로 다르게만 잘 넣으면 된다.
등록할 땐 특정 이름으로 등록하고 위에서 지은 이름 user에 .reducer(쩜reducer) 를 붙여준다.
보통 특정 이름의 경우는 createSlice와 동일하게 해준다.
💡 Redux store의 state 를 꺼내는 법
cart.js 파일로 가서 저장한 Redux store의 state 를 사용해 보자.
useSelector 라는 기능을 사용한다.
useSelector 는 Redux store를 그대로 가져와 준다고 생각하면 된다.
변수에 useSelector를 통해 가져온 store에 있던 모든 state 값을 저장한다.
변수에 담은값을 콘솔에 찍어보면
이런식으로 출력되는것을 확인 할 수 있다.
a에서 user라는 값을 찍어보면
이 출력된다.
한가지 더 실험해보면
store 에서 저장된 변수중에 configureStore에 등록 해줄때 저장했던 변수명으로 호출 된다.
user라고 지었던 변수명을 usera로 바꿔주니
매칭이 안되는 것이 확인이 가능했고 다시
라고 해야 다시 우리가 찾던 값이 나왔다.
💡 state 하나 더 추가해보기
기존에 있던 createsSlice 위치에 나란히 하나의 변수를 선언하고 저장해 준다.
마찬가지로 createSlice를 만들었으면 configureStore에 등록해주면 된다.
다시 카트로 돌아가 useSelector를 통해 가져온 state 값을 저장한 a 를 콘솔에 찍어보면
stock 만 찍어보면 stock 부분만 출력될 것이다.
💡useSelector 좀 더 편하게 쓰기
useSelector 의 내부 함수 파라미터에 있던 state 는 store 안의 모든 state 를 포함하고 있는데
애초에 이곳에서 원하는 state 만 골라서 변수 a에 넣는 것이 가능하다.
또 여기에서 중괄호와 return 은 동시에 축약해서 쓸 수 있다.(javascript 문법)
아니 이렇게 좋은 redux를 왜 props를 쓰다가 이제 알려준건가요?
redux를 쓰기 위해선 외부 라이브러리를 이용해야 하고 세팅하는 문법이나, state 등록 같은 경우 등등
간단한 프로젝트를 이용하는 props를 이용하는게 훨씬 코드가 짧다.
또한 redux 를 쓴다고 해서 무조건 state 를 store에 보관해야 하는 것이 아니다
공유가 필요한 state 만 redux에서 관리하는 거임!
배운걸로 활용해보기
[
{id : 0, name : 'White and Black', count : 2},
{id : 2, name : 'Grey Yordan', count : 1}
]
이 데이터를 store.js 에 담아서
cart 테이블에 나타나게 해라.
🔨 Step 1. createSlice 를 변수에 담아준다.
createSlice 는 기본적으로 name 과 initialState 가 반드시 있어야 한다.
(사실 여기서 name의 역할을 잘 모르겠다 막 이상하게 써도 잘 전달된다)
🔨 Step 2. configureStore에 등록을 해준다.
저기 노란색 data1이라고 이름 지어준 것을 가지고 useSelecter에서 호출 할 수 있다.
🔨 Step 3. 사용하려는 페이지에 useSelector를 사용해 데이터를 받는다.
이제 이 값을 화면에 표시해줄 cart 로 가보자
useSelector 를 통해 보내려는 데이터 data1을 바로 가져온다
콘솔을 통해 찍어보면 다음과 같은 데이터가 전달된다.
🔨 Step 4. 반복되는 데이터를 받아줄 컴포넌트를 만들고 값을 전달한다.
이 데이터 값들을 전달 받을 td 부분을 컴포넌트로 만들어준다.(반복되기 때문에)
그리고 함께 props로 아까 받은 data 값을 전달해준다.
( 사실 TableTd컴포넌트에서도 redux useSelector을 한번 더 선언해서 데이터 값을 받아도 되긴한다.)
🔨 Step 5. Map을 통해 컴포넌트를 반복해준다.
짜잔~
강사님은 컴포넌트 따로 생성 안하고 바로 만드심. (꼭 컴포넌트 만들필요X)
출처 : 코딩애플 React 강의입니다.
스스로 생각해서 코드를 직접 짜보게끔 많이 유도해주시고 강의 설명도 이해가 쉽게 설명해주십니다.