[React]쿠키 및 리덕스

쿠키는 생성 테스트 할때

const login = () => {
    setCookie("user_id", "kbs", 3);
    setCookie("user_pwd", "pppp", 3);
  };

보낼 페이지 (Login.js) 에서 보내줄 데이터를 만들어 놓고

받는 Cookie.js 에서

const setCookie = (name, value, exp = 5) => {
  let date = new Date();
  date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}`;
};

이런식으로 받는데, 저 expires는 유효기간이고, 받아온 값을 알맞게 넣어서 쿠키에 저장된다.

그리고 쿠키를 받아서 무언가를 하고 싶을때

const getCookie = (name) => {
  let value = "; " + document.cookie; // document 앞에 ; (띄어쓰기) 를 안붙이면 cookie의 맨 앞 값인 user_id 값이 split이 안된다.

  let parts = value.split(`; ${name}=`); // aa=xx; user_id=aaa  이럴때 ; user_id= 로 자르면 값만 반환되기 때문에 튜터님이 이렇게 자르심
  // [aa=xx/ aaa; abbb=ssss;]  앞에 친구 버리고 뒷 친구만 가져오려면?  - 잘 이해안됨

  // pop 과 shift 를 자세히 알아보기! 서로 반대의 개념
  if (parts.length === 2) {
    return parts.pop().split(";").shift();
  }
};

이런식으로 받는데, split 하는 과정이 좀 뭔가 그렇다. 이게 정공법일 수 도 있고, 강사님만의 방법일 수 도 있고 하여간 뭔가 복잡함. 세미콜론과 띄어쓰기 하나하나 신경써야하다니.

다음으로는 삭제할때. 기간을 과거로 잡아서 만료시켜버리는게 삭제하는거다.

const deleteCookie = (name) => {
  let date = new Date("2020-01-01").toUTCString();

  document.cookie = name + "=; expires=" + date;
};

이놈을 이제 삭제하고 싶은 곳에서

import {deleteCookie} from "../../../"

대충 이런식으로 불러와서 버튼 onClick에 넣어주면 끝

그리고 이 값들을 리덕스에서 관리하면 더 효율적으로 관리가 가능한데,
라우터는 App.js 에서 props 들로 값을 넘겨주기 때문에 redux를 사용해서 쿠키값 전달이 어려워지기 때문에 그걸 위한 라이브러리

yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

이거 그냥 긁어서 터미널에 붙여넣기 하자.

그리고 얘는 액션생성도 해야되고 이것저것 할게 많으니까 뭔가 이것저것 자동화 해준다는데 처음엔 사용하기 불편할수도 있다고 함

yarn add immer redux-actions

얘도 같이 넣어주자

강사분의 설명

설치한 redux-actions와 immer를 사용해서 액션과 액션 생성 함수, 리듀서를 만드는 방법, 알아봅시다!

이 immer는 불변성 관리를 , redux-actions는 좀 더 편한 액션 관리를 위해 사용해요.
→ Q. 왜 불변성 관리하는데 패키지까지 써야하나요?
A. 객체는 const로 선언해도 내용이 수정될 수 있죠! 그래서 스프레드 문법 ({...어떤 것} 이렇게 쓰는 거!) 등을 이용해서 수정되지 않게 주의해서 코드를 작성합니다.
그런데, 객체 구조가 복잡해지면 코드를 짜기가 번거로워요. 그래서 불변성을 신경 쓰지 않는 것처럼 써도 알아서 불변성을 유지해주는 immer를 사용하는거예요.

[시작하기 전에 잠깐!]
항상 폴더부터 만들고 시작해야해요! src 폴더 아래에 redux폴더, 그리고 그 아래에 modules 폴더를 만들어주세요.