Redux3 [Redux] 사용법 let alert초기값 = true; function reducer2(state = alert초기값, 액션){ if() return state } let store = createStore(combineReducers({reducer,reducer2})); Cart.js로 와서 다음과 같이 state.reducer와 state.reducer2를 한다. function state를props화(state) { //redux store데이터를 가져와서 props로 변환해주는함수 return { state : state.reducer, alert열렸니 : state.reducer2 } } state를 쉽게 꺼내 쓰는 방법 Cart 아래 다음을 입력한다 let state = useSelector((state) =.. 2021. 8. 17. [React js] Redux 프롭스가 많아지면 쓰기 불편해서 쓰기 싫을 때 쓴다. 1.띄어쓰기를 해서 2개를 동시에 설치한다. yarn add redux react-redux 2.index.js 에 import하고 다음과 같이 app component를 Provider로 감싸준다 (감싸진 애들끼리 props 없이 state 공유 가능) 3. createStore로 state를 만든다. let store = createStore(()=>{}); 4. Provider에 값을 전달한다. 그냥 바로 store로 쓸수는 없고 세팅을 해야한다. 5. Cart.js에서 다음 함수를 추가하고 export default부분을 다음과 같이 바꾼다. function state를props화(state) { return { state : state } }.. 2021. 8. 13. [React js] props 대신 쓸 수 있는 context API 1. 범위를 생성한다 let 재고context = React.createContext(); 2. 같은 값을 공유할 범위를 지정한다 { shoes.map((a,i)=>{ return ( ) }) } 3. 변수로 받아오기 & 사용하기 function Card(props) { let 재고 = useContext(재고context); return ( { props.shoes.title } { props.shoes.content } & { props.shoes.price } {재고[props.i]} ) } export default App; hook이기 때문에 자동으로 import 할 수 있음 # 다른 파일(Detail.js)에서도 context를 쓰는 방법 1. 생성한 범위 앞에 export를 붙여준다. ex.. 2021. 8. 13. 이전 1 다음