오늘의 결론
- 라우팅시 Switch 사용해서 주소 올바르지 않는 페이지 잡기
- 리덕스란?
- 리덕스 설치 & 방법론(덕스구조)
- 리덕스와 컴포넌트 연결 & 사용법(useSelector, useDispatch)
- 상세페이지 보여주기
오늘 배운 것
Switch
스위치를 import하고 스위치로 공통요소 이외에 Route에 묶어주면 스위치가 하나하나 주소를 다 찾아보고 없으면 마지막 Route를 보내준다. 마지막이라서 보내주는게 아니라 path가 지정이 안되있는 거라 보내주는 것. 그리고 추가적으로 마지막 페이지에 usehistory사용하여 버튼 까지 만들어주면 더 좋고!
리덕스란?
전역 상태관리(저장소)이다. 왜 해야하나?
props drilling - 내가 쓸모없는 데이터를 전달하기위해 가지고있는 것을 막기위해
리덕스를 생각할때는 아래 3가지 항상 기억하자.
- 전역으로 누구나 볼수 있는 데이터가있다.
- 데이터를 구독하는 컴포넌트들 있다. = 참조 or 수정하고 싶어하는 컴포넌트가 있다.
- 수정 값은 구독한 컴포넌트 모두가 보게 해줘야 한다.
수정할 때는 데이터를 바꿀 수 있는 함수를 호출해서 데이터를 수정한다.
그 다음에 리덕스가 전역데이터를 구독한 컴포넌트한테 데이터가 바뀌었다고 다시 신호를 보낸다.
구독한 컴포넌트들이 데이터가 바뀌었다고 신호를 받으면 리렌더링이된다.
아래 도표로 리덕스의 상태관리 흐름을 이해하면 더 쉽다.
리덕스는 아래 2개다. 이 중 리듀서에서 실제적으로 데이터 수정이 일어난다.
스토어: 전역데이터 저장소
리듀서: 데이터가 실제적으로 수정이 일어나는 곳
리덕스 설치
redux : 말 그대로 redux 패키지를 말하는 것이고
react-redux : 리액트에서 편히 쓸 수 있게 해주는 패키지
리덕스 공식문서 사이트
https://ko.redux.js.org/introduction/getting-started/
스파르타코딩 클럽 문서 참고해서 아래 개념 확인하기
https://teamsparta.notion.site/3-b3a0003df5a24ec485826221c68a39dc#96e422354a0f4b8b8ab7a4665aa181ff
덕스구조(리덕스 사용법)
https://github.com/erikras/ducks-modular-redux
- redux 폴성 생성 -> 안에 modules 폴더생성
- 덕스 구조
Actions에 CREATE 변수 생성 후 데이터/타입을 써준다.
Action Creators에는 생성 함수 createBucket을 만들어주고 파라미터에 데이터 bucket를 넣어준다. return으로 객체 타입, 데이터를 전달한다. 데이터 같은 경우 키:벨류 값이 동일하니 bucket하나만써도 상관없다.
초기값 설정은 state에 초기값을 설정해주는 것이다. App.js의 list를 그대로 가져왔다.
Reducer는 export해줬고 state 에는 초기값을 넣어줬다. 파라미터에 state = { }, action = { } 이렇게 객체가 들어간 것은 파라미터에 값이 들어오지 않았을시에는 빈 객체를 전달한 것이라고 알려주는것이다. 다시말해 데이터를 전달 받지 못하여 함수를 실행하지 못하는 오류를 방지하기 위함이다. 마지막을 switch문에 새로운 배열 new_bucket_list를 생성 후 기존데이터+새로운데이터를 넣어준뒤 초기 값 형태와 동일하게 list: new_bucket_list를 넘겨준다.
리듀서 까지 완료했으면 store를 만들어야한다.
store는 정확하게 리듀서 전부 묶은것(rootReducer) + 옵션들(미들웨어,데브툴)을 합쳐서 만들어진다.
redux패키지안에 있는 createStore함수와 리듀서를 묶을 수 있는 combineReducers를 import한다.
그리고 리듀서들을 하나로 묶는 rootReducer = combinereducers를 만들어준다.
그리고 createStore를 이용해 store를 만들고 export하면 끝
bucket이외에 다른 리듀서가 있을시 아래와 같이 쓴다.
리덕스와 컴포넌트 연결 & 사용법
리덕스와 컴포넌트 연결은 index.js파일에가서 Provider를 import해주고 BrowserRouter를 Provider로 감싸준다. 그리고 우리가 만들었던 store를 import해준 뒤 Provider에 store를 넘겨준다.
사용법
UseSelector - 리덕스에서 데이터 가져오기
bucketList에서 my_lists쪽은 주석처리해준다. 그리고 data 상수를 만들고 useSelector를 사용한다.(안에 함수를 넣는다).
이때 함수의 첫번째 state는 store에 있는 전체 데이터 이고 => 뒤에있는 state는 리턴값이다.
즉, store전체의 데이터를 보겠다는 말이다.그리고 data를 console로 찍었다.
console로 찍은 data를 보면 bucket:list가 나온다.
bucket은 모듈명이 나오는것이고,
list는 이 모듈(bucket)가지고있는 데이터 명이다. (이 데이터는 모듈에서 initialState로 초기값을 줬던 것)
그럼 이제 콘솔로 확인한 값을 토대로 useSelector의 return값을 state.bucket.list으로 변경하고 상수명도 변경하면 된다. 리덕스 데이터를 받아오는지 확인하고 싶으면 bucket모듈에서 초기값을 변경해주고 저장해보면 알 수있다.
UseDispatch - 데이터 수정하기
-
App.js에서 import
-
dispatch 생성. dispatch에는 useDispatch에서 return한 객체가 들어간다.
-
추가하기 함수가 어디에 붙어있는지 확인 후 그 함수에 가서 액션을 일킨다.
액션을 일으킬 때는 dispatch를 사용하며. 액션 객체를 넣어줘야한다.
액션 객체는 딕셔너리 형태. {type: "", data}
-
하지만 bucket 모듈에 액션객체를 생성하는 함수(createbucket)를 만들어놨었다.
이 함수(createbucket)를 바로 실행하도록 dispatch에 넣어준다. (바로실행한다는 것은 함수에( )붙여서 넣는다는 의미다.)
근데 사용할려면 뭐? import해야된다. 그리고 함수에 추가 될data를 를 넣어줘야 하니 text.curret.value를 넣어준다. 이러면 createBucket가 먼저 실행되고 그 다음 reducer가 자동으로 실행된다.
- 상세페이지 보여주기
- URL 파라미터 사용 (UseParams)
- UseSelector사용
app.js에서 path="/detail/:index" 변경 -> detail파일에서 import useparmas,
const index = useParams()변수생성 후 콘솔 index찍어보기 -> 안나온다. ->
buketlist.js에서 이동하는 주소변경 history.push("/detail/"+index); -> 잘나온다.->
이제 리덕스 데이터에서 버킷리스트 데이터를 가져와야한다. -> import useSelector 입력 ->
const bucket_list = useSelector ((state) => state.bucket.list); 입력 => 콘솔로 bucket_list 확인 -> 이제 우리가 넣어주고 싶은 건 return쪽에 bucket_list의 인덱스 번째의 데이터이다.-> 나머지는 코드보고 생각해보기
- 삭제하기
return에 버튼 생성 -> onclick으로 화살표함수 걸어주고 콘솔로 확인하기 -> 뒤로가기 버튼 적용하기(useHistroy) => 이제 삭제하려면 뭐가 필요한가? 액션이 필요하다 =>
bucket.js에 액션 생성 const DELETE = 'bucket/DELETE' 액션 타입을 지정해준 것이다.
=> 액션 생성함수 생성
export function deleteBucket(bucket_index) {
return {type:DELETE, bucket_index:bucket_index}=> 이제 액션이 디스패치 되면 리듀서에서 바꿔주기때문에 리듀서에 case를 늘려준다.
=> 여기까지만 해주고 다시 detail.js로가서 연결해준다.=> 연결해준다는 것은 액션을 디스패치 해준다는 말이므로 import usedispatch해준다. => const dispatch = useDispatch()도해준다. => 그리고 button에 바로 dispatch()걸어준다. => 그리고 디스패치에 액션 생성함수를 넣어서 액션객체를 넣어줄것이니 액션생성함수를 import해온다. => 그리고 액션생성함수와 idx값 넣고 저장한다 dispatch(deleteBucket(idx값)) => 콘솔을 액션 생성함수와 case쪽에 넣어서 잘됐는지 확인해본다. 잘나오면 = > case쪽에 다시 콘솔 state와 action을 쳐보자 => 잘나온다.
=> 그리고 필터를 이용하여 인덱스가 겹치는 부분은 return이 안되게해주자.
여기서 !== 는 숫자와 문자도 다르다고 판단하기떄문에 action.bucket_index를 parseInt로 숫자로 바꿔줬다.)
아래처럼 바꿔주면 끝
느낀 것
이제 3주차강의가 끝나고 4~5주차가 남았다.. 4~5주차까지 마무리하고 WIL에 한꺼번에 느낀점을 정리해볼까한다..
내일 배울 것
react 주특기 강의 4~5주차 강의보기
