redux toolkit 사용법
사진을 보면 provider라는 컴포넌트로 전체를 감쌌는데, 이 말은 전체 전역적으로 상태관리를 하겟다는 말이 된다.
저기 안에 라우터 컴퍼넌트도 넣어두고 하면 된다.
요는, 자기가 사용할 범위에 provider컴포넌트로 감싸주면 된다는것이다.
그리고 상태관리를 하는 파일은 별도로 js로 만들어 관리를 한다.
일반적으로 store라는 이름을 많이 쓴다고 한다.
정리하자면,
리액트는 단방향으로 데이터를 전달하고, props의 형태로 데이터를 전달하기 때문에
만약 자식컴포넌트의 숫자는 많고, 상태를 변경해야하는일이 많으면 해야할일이 복잡해지고 많아지기때문에
리덕스를 사용해서, 별도의 js파일을두고 자식이건 부모건 js파일안의 상태관리 함수를 호출해
상태를 관리하는것.
이제 vscode로 가서 직접 사용해보자.
항상 컴포넌트나, js파일을 사용할때는 import를 사용하는것을 잊지말자.
상태관리 js (store.js)파일을 만들고 프로바이더 컴포넌트의 props로 전달을 했다.
상태관리하는 js, 그리고 prop의 이름은 자율이지만 관례적으로 store라는 이름을 쓰고
두개의 이름을 일치화 시키는것을 선호한다고 한다.
이제 셋팅이 완료되었으니 redux를 이용하여 장바구니 기능을 만들어보자!
먼저 장바구니 레이아웃을 만들어보자. 간단하게 만들기 위해 부트스트랩을 사용할것이다.
일단 잠시 provider를 주석처리하고, 레이아웃을 먼저 잡고 상태관리 로직을 짜보도록 하자.
components - table 클릭 - 원하는 레이아웃을 골라서 import 시켜주면 된다.
일단 간단하게 장바구니 레이아웃을 잡아봤다.
()안에 이름을 전달하고 수량을 변경하는 기능을 넣어보자.
그러기 위해선 상태변화 로직을 짜야한다. shop.js에 설정을 하자.
문서에 적힌 사용방법에 따라 먼저 configureStore를 import해준다.
여기서 또 createSlice라는 함수가 있는데,
해당 함수도 같이쓰면 액션과 리듀서를 생성하는 작업을 자동화할 수 있으므로 코드양이 줄어든다고 한다.
따라서 해당 함수도 import 시켜주자.
해당 함수를 작성하는 방법은 다음과 같다.
createSlice를 호출하면, createSlice라는 객체를 반환해준다.
그 안에 name, initialstate(상태 관리할 목록 이 안에서 속성을 설정해둬도 되고 사진처럼 외부에서 정의하고 내부에서 갖다 써도 된다.)
여기서 creatSlice객체 내부에 name을 설정하지않으면 자동적으로 내가 설정한 변수명이 name이 된다.
name을 설정하면 해당 객체의 이름이 내가 설정한 name으로 된다.
하지만 관례적으로 변수명과 name 값을 일치화시킨다고 하니 일치화시켜주자.
또한 reducers에서 set함수를 선언해 initialstate의 값을 변경시켜줄수있다.
configureStore 함수는
스토어를 생성한다.
스토어의 역할은?
상태관리
액션
리듀서
원래 리듀서 함수 안에, 액션 함수 즉 상태를 변경하는 함수를 넣어두고
reducer에 해당 리듀서함수를 값으로 지정햇는데
createSlice로 reducers를 키값으로 설정뒤 밸류값으로 상태변경 함수를 설정할수 있다.
여기서 user의 reducer를사용한다는말은 reducers안에 있는 reducer객체를 사용한다는 말이다
reducer객체는 한 개의 액션에 대한 상태 변경 로직을 담당한다.
즉
reducers안에 reducer (상태변경함수로직1개만 담당) 이러한 리듀서가 여러개 있는것이다.
