리덕스 또 시영님과 스터디 import시 {} 차이 테이블의 구조 table thead tbody 쓸데없음 tr 하나의 행 - 가로줄 td/th 열 - 세로줄
props 대신 리덕스를 사용
모든 컴포넌트들이 같은 state를 공유할 수 있다.
index에 import import {provide} from "react-redux"; 로 감싸면 같은 state 공유가 가능
import {createStore} from "redux";
store에 데이터 저장후 provide로 감싼다. 원하는 컴포넌트에서 props로 등록 후 사용
리덕스 기능2 state 데이터 관리가능
state 수정방법을 먼저 정의해야한다. >>reducer 액션 크리에이트? 스위치 케이스?
리듀서는 state를 항상 리턴 해야함 그게 바뀐 것이든 아닌 것이든
action.type === '수량증가 { }
데이터 수정요청 수량증가는 리듀서에 만들어둔 것 props.dispatch('수량증가') 리듀서에서는 state를 만들 때 변수로 초기값을 만들어 넣어야함 그리고 state 수정값도 작성
reducer에는 초기값, 데이터수정방법 2가지를 정의해야함 그리고 항상 state를 뱉어야함
store는 state 보관함
리덕스는 대형 사이트에서 사용할 때 효과를 발휘함 굳이 필요없는건 리덕스 x useState를 사용 state가 여러개 필요하면 reducer를 더 만든다. reducer합치는건 combinereducers = store
튜터님은 리듀서 하나에 여러케이스 (액션 크리에이트로 만든) 애플코딩에선 state별 리듀서를 만들어서 if문
dispatch()로 수정요청 시 데이터를 보낼 수도 있음 > 뭘 수정해달라는! type: 수량증가 payload: 보낼 데이터 > 액션에 포함
등록하기를 누르면 state를 스토어에 저장하게 하고 이걸 store에 있는 것을 뷰에 뿌려준다.
훅 useSelector 에 콜백함수
useSelector((state) => state) 리덕스에 있던 모든 state
let dispatch = useDispatch();
array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 map()을 사용한다. const 어레이 = [2, 3, 4];
const 뉴어레이 = 어레이.map(function(a) { return a * 2 }); 어레이에 있던 요소 하나하나들을 꺼내서 a로 지정후 x 2 를 해줌. 새로운 변수에 담아줘야한다. 결과값은 뉴어레이 = [4, 6, 8];
쓰는법
{반복할 데이터.map(() => { return} ) }