[React] ajax

ajax

: 웹 서버에 데이터 요청을 보내기 위한 XML HttpRequest 객체 브라우저와 데이터를 보여주기 위한 JavaScript, HTML DOM의 조합

= 페이지 새로고침 없이 서버에 요청

= 서버로부터 데이터를 받고 작업을 수행

import axios from 'axios'

Get요청
axios.get('url')

요청 결과
axios.get('url').then()

🚩 오류가 난다면?

catch() 사용으로 오류 처리!

→ error 객체를 이용해 오류에 대한 주요 정보 확인할 수 있음

error.response.statue : 응답 상태코드 정보

error.response.headers : 응답 헤더 정보

Redux

: 자바스크립트 상태관리 라이브러리

npm install @reduxjs/toolkit react-redux

❓상태란?

• React에서 State는 component 안에서 관리해야함.

→ 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가,

상태를 관리하는 부모 컴포넌트를 통해서 주고 받아야함

• 자식이 많아진다면 상태 관리가 매우 복잡해짐

→ 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야함 => Props drilling 이슈

⇒ 리덕스를 쓰면 상태관리를 컴포넌트 밖에서!

Store

: 컴포넌트와 별개로 상태가 관리되는 오직 하나의 공간

Action

: 앱에서 스토어에 운반할 데이터

Reducer

: Reducer가 주문을 보고 Store의 상태를 업데이트

→ dispatch() 사용해 Reducer호출 → Store 생성

-리듀서 함수가 받는 두 가지 파라미터

• state : 현재 상태
• action : 액션 객체

🌟셋팅1 : store.js 파일 생성

import {configureStore} from '@reduxjs/toolkit'

export default configureStore({
	reducer: {
	
	}
})

🌟셋팅2 : index.js

import {Provider} from "react-redux";

...

root.render(
	<Provider store={store}>
		<BrowserRouter>
			<App/>
			/*props 없어도 
			store.js에 있던 state 사용가능*/
		</BrowserRouter>
	</Provider>
)

store에 state 보관하고 쓰는 법

1. createSlice() 상단에서 임포트, {name : 'state이름', initialState: 'state값'} 넣어서 state 생성
2. configureStore()안에 {작명 : createSlice만든거.reducer}

import {configureStore, createSlice} from '@reduxjs/toolkit'

let user = createSlice({
	name: 'user',
	initialState: [10, 11, 12]
})

export default configureStore({
	reducer: {
		user : user.reducer,
		stock : stock.reducer,
		
	}
})

• state하나를 slice라고 함

사용

import {useSelector} from "react-redux"

function Cart(){
	let allState = useSelector((state)={return state})
	
	return(...
	)
}

아무 컴포넌트에서 useSelcector((state)=>{return state}) 쓰면 store안에 있는 모든 state가 그 자리에 남음