create react-app 할 때 주의점 : 프로젝트 이름에 대문자 사용불가
npm install -g create-react-app : react 프로젝트 생성하는 create-react-app 명령어 설치. -g 옵션을 한 경우 시스템 공용 폴더에 설치된다.
npm i npx -g : npx로 프로젝트 생성 하고자 한다면 설치해줘야한다
npx : npm의 5.2.0 버전부터 추가된 도구. npm과 비교하는것이 아닌 npm에서 제공해주는 도구 중 하나
npm⊃npx 라고 생각하자
toolkit은 값에 직접 접근해서 수정해도 값이 업데이트가 된다
push와 concat의 차이[splice와 filter도 추가]
push : 배열의 끝에 하나 이상의 요소를 추가하고 그 배열을 반환해줌(기존 배열에 바로 들어감)
concat : 배열의 끝에 하나 이상의 요소를 추가하고 새 배열로 반환함(기존 배열에 바로 들어가지 않음)
splice : 배열의 기존 요소를 삭제,교체,추가 시켜줌 배열이름.splice(시작인덱스,제거할 요소 수(0이면 제거안함), 배열에 추가할 요소) 값은 기존 배열에 바로 적용된다
filter : 배열의 요소 중 조건을 만족하는 값을 새롭게 반환함(기존 배열에 바로 들어가지 않음)
toolkit의 경우 createSlice를 사용한다
사용할 slice.js 부분[slice폴더를 생성하고 안에 넣어줘도 된다. 관리가 편해짐]
import {createSlice} from "@reduxjs/toolkit"으로 createSlice를 사용한다고 알리고
export let 슬라이스이름=createSlice({
name:"이름-비어 있으면 에러창이 나옴",
initlalState:{초기값부분-중괄호는 필수}
reducers:{action함수 생성 부분
예)add:(state)=>{state.value+=1}
예2)delete:(state.action)=>{state.splice(action.payload,1)
여기서 중요한 부분은 action.payload인데 이 값은 고정되어 있다. state에 커서를 가져다 대면 initialState 부분이 보이고 action에 커서를 가져다 대면 payload라고 고정적으로 나온다. 그리고 action 생성 함수가 1개더라도 reducer가 아닌 reducers를 써야 한다.
})
export let {reducers에서 쓴 action함수들}=슬라이스이름.actions;action 생성함수를 쓰기 위해 내보내는 구간. 위의 reducers와 같은 이유로 함수가 1개여도 action이 아닌 actions다.
export default 슬라이스이름.reducer; reducer를 내보내는 구간
/src 에 store.js를 생성한다
import {configureStore} from "@reduxjs/toolkit"
import 슬라이스이름 from 해당슬라이스위치
export default configureStore({ reducer:{정해준이름:슬라이스이름,여러개면,로 구분}})
로 작성하면 provider에서 store에 넣어주면 된다. 슬라이스 만들기 전에 생성해서 reducer 부분을 비워도 에러는 생기지 않는다.
index.js에서
import {Provider} from 'react-redux'; 와 import store from './store'로 불러오고
<App/> 을 <Provider store={store}>로 감싼다
store.js를 먼저 만들고 index.js에서 provider와 store로 만든 뒤 slice들과 jsx를 생성해서 만들어주면 좋다. index.js의 경우 더이상 건드릴 부분이 없어지고, store.js는 slice가 추가되면 추가할 slice를 import 하고 reducer에 넣어주는 간단한 과정만 있다.
jsx에서 dispatch(action함수(변수값)) 부분 중 변수값을 여러개 들고 올 수 있다. 배열로 들고오기 때문에 reducer에서 사용하기 위해서는 action.payload.변수값 형태로 불러와야 한다.
useSelector로 각각의 slice의 값에 접근해서 비교도 가능하다. 예를 들어
A.map((memo)=>(---<p>{B.find((like)=>like.id === memo.id}</p>처럼 밖에서 memo로 지정한 A의 배열은 안의 B배열의 find 함수 안에서 그대로 사용된다.
각각의 slice에서 만든 action 함수의 경우 dispatch() 안에서 쓰다보면 밑에 나오는데 그 부분을 클릭하면 자동으로 import가 만들어진다. 만약 잊어버렸다면 지우고 다시 쓰거나 import로 추가해줘야 한다
import {useSelector,useDispatch} from 'react-redux'
import 후 바로 useSelector를 적어도 나타나지 않을 수 있으므로 import {} from 'react-redux' 를 먼저 쓰고 난 후 괄호 안에 적어주면 나타난다
let 정해줄이름=useSelector((state)=>(state.slice에서 작성한 이름))
let dispatch=useDispatch(); 무조건 dispatch일 필요는 없지만 헷갈리지 않게 이름을 써주면 편하다
{}-중괄호 와 ()-소괄호 사용 구분을 해야한다. 가끔 무의식적으로 막 쓰다가 어떤 경우는 실행 때나 이전에 문제 부분에 알려주는데 알려주지 않고 그대로 실행되는 경우도 나오기 때문에 원하는 값이 안나올 때 원인 찾기가 힘들다.