솔적솔적

이번에는 Redux 안에 있는 state가 object나 array일 경우에 변경하는 법을 알아보려한다. initialState 안을 오브젝트로 변경한다. store.js import { configureStore, createSlice } from '@reduxjs/toolkit' import user from '../store/userSlice' const user = createSlice({ name : 'user', // 'state이름', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return 'park' + state } } }) object로 바꿨기 때문에 state를 데이터바인딩하는 문법도 달라졌을 것이..

Store.js를 빼다가 쓰는 법을 알아보자. 그전에 저번 시간에 말했던 것 복습. Redux를 왜 사용하는가. 👉 이유는 컴포넌트간에 state공유가 불편할 때 사용한다. redux를 사용하면 redux store.js통 안에 state들을 다 넣고 빼서 사용할 수 있기 때문이다. 그럼 props전송이 필요없는 이점이 있기 때문. 리덕스 스토어안에 있던 스테이트들은 모든 컴포넌트들이 직접 통신을 해서 store.js안에 있는 state을 가져가서 쓸 수 있으니 props전송을 안해도된다는 것! 그럼 이 store.js 파일에다가 state만드는 법을 알아보자. 일단 Store.js 파일안에다가 createSlice() 쓰고 import해야한다. useState와 비슷한 용도임 store.js impor..

React를 사용하려면 Redux의 개념과 어떻게 사용하는지에 대해서 알아야한다는데, 설치 과정이 요리갔다 저리갔다여서 간단명료하게 설치방법과 셋팅, Redux를 왜 쓰는지에서 알아보고자한다. 만들려는 것은 Redux를 이용하여 장바구니만들기이다. (목표목표~) | 페이지 이동 경로 설정 우선 페이지 이동할 수 있도록 라우터 경로 설정, | 장바구니인 Cart.js 컴포넌트 생성 Cart.js 컴포넌트를 만들기 ( 디자인은 우선 간단하게 bootstrap 라이브러리의 table 을 사용) import {useState, memo, useMemo} from 'react'; import {Table} from 'react-bootstrap';..

오늘은 리액트에서 Ajax의 요청방법은 어떻게 하나? 에대해서 알아보고자합니다만, 그전에 Ajax에 대한 개념과 Ajax를 사용하려할 때 알아야 할 요청방법들에 대해서도 살펴보도록 하겠습니다. 자, 그럼 먼저 오늘 목표로 하려하는 Ajax, 요녀석은 뭘까요? | Ajax 란? Ajax란 Asynchronous JavaScript and XML의 약자로 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있는 것입니다. Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다. 예를들어, 홈페이지에 3영역으로 나눠져있습니다. 내가 검색하고 싶은 것을 검색할 수 있는 검색 영역, 검색해서 나오는 목록 수(조회영역) 검색해서 나온 목..