쿠키란?
- 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 데이터파일입니다.
- Key와 Value로 구성되고, String의 형태로 이루어져 있습니다.
- 유효시간을 명시할 수 있으며, 유효시간이 정해지면 브라우저가 종료되어도 유지됩니다.
- 클라이언트 상태로 로컬에 저장했다가 참조하여 정보를 가져옵니다.
- 300개까지 저장이 가능하며, 하나의 도메인당 20개의 값만 가질 수 있고, 하나의 쿠키값은 4KB까지 저장 가능합니다.
- 사용자가 따로 요청하지 않아도 Request시에 Request Header를 넣어서 자동으로 서버에 전송합니다.
사용이유
- 세션관리 : 로그인, 접속 시간 등 서버가 알아야 할 정보를 저장할 때 사용합니다.
- 개인화 : 사용자마다 다르게 적절한 페이지 보이도록 할 때 사용합니다.
- 트래킹 : 사용자의 행동과 패턴 분석하여 기록할 때 사용합니다.
단점
- 방문한 웹 사이트에 대한 정보 및 개인정보가 기록되어 사생활을 침해할 수 있습니다.
- 사용자에게 저장되기 때문에 임의로 고치거나 삭제가 가능하며, 보안이 취약합니다.
- 매번 헤더(Http Header)에 쿠키에 대한 정보를 추가해서 보내기 때문에 상당한 트래픽을 발생시킵니다.
React에서 Cookie사용하기
설치
npm install react-cookie예제
set cookie버튼 클릭시에 랜덤으로 숫자를 만들어서 쿠키에 저장하고, get cookie버튼 클릭시에 쿠키의 정보를 가져오고, remove cookie 버튼 클릭시에는 쿠키를 삭제하는 예제입니다.
소스는 다음과 같습니다.
구현 화면은 다음과 같습니다.
참고
