쿠키, 세션, 스토리지

✅ React에서 데이터 저장 방식 정리 

1) React의 상태(state)와 한계

React는 컴포넌트 내부의 state로 화면에 필요한 데이터를 관리한다.
setState가 호출되면 상태가 업데이트되고 UI는 자동으로 다시 렌더링된다.

하지만 state는 컴포넌트 메모리에 존재하는 일시적인 값이기 때문에:

• 페이지 새로고침
• 컴포넌트 언마운트(페이지 이동)

와 같은 상황에서 초기값으로 리셋된다.

📌 중요!!
state는 “리렌더링” 때문에 사라지는 것이 아니다.
사라지는 이유는 오직 새로고침 또는 언마운트 때문.

따라서 로그인 정보처럼 지속되어야 하는 값은 state만으로 유지할 수 없다.

---

2) 지속적으로 유지해야 하는 데이터는 브라우저 저장소에 저장

페이지 이동, 새로고침, 앱 재실행 후에도 유지해야 하는 데이터는
React state가 아닌 브라우저 저장소에 저장해야 한다.

대표적인 저장 방식은 다음과 같다.

• Cookie (쿠키)
• localStorage
• sessionStorage

이 저장소들은 컴포넌트 생명주기와 상관없이 브라우저에 남아 있기 때문에
새로고침 또는 컴포넌트 이동이 발생해도 데이터가 유지된다.

---

3) 쿠키(Cookie)와 세션(Session)

✔ 쿠키

쿠키는 브라우저와 서버가 정보를 교환하기 위해 사용하는 작은 데이터 저장공간이다.

쿠키 특징

• 브라우저가 서버에 요청을 보낼 때 자동으로 포함된다.
• 도메인 단위로 저장되며, 다른 도메인에는 전송되지 않는다.
• 브라우저마다 서로 다른 저장공간을 사용한다.
  (Chrome 쿠키 ≠ Safari 쿠키)
• max-age, expires로 유효기간 설정 가능.

쿠키의 문제점

쿠키는 기본적으로 JS에서 읽을 수 있기 때문에:

 

document.cookie

이 코드로 브라우저에 저장된 쿠키를 그대로 읽을 수 있다.

따라서 쿠키에 로그인 정보 같은 민감한 데이터를 직접 저장하면
삭제·수정·탈취(XSS)에 취약해진다.

---

✔ 세션(Session)

세션은 사용자 정보를 쿠키에 직접 저장하지 않기 위한 인증 방식이다.

세션 동작 방식

1. 사용자가 로그인하면 서버가 세션 ID를 생성한다.
2. 실제 사용자 정보는 서버 내부(세션 저장소)에 저장한다.
3. 브라우저에는 세션 ID만 쿠키에 저장한다.
4. 브라우저는 요청마다 세션 ID를 자동 전송한다.
5. 서버는 세션 ID를 기반으로 사용자 정보를 조회한다.

즉, 민감한 정보는 브라우저가 아닌 서버가 보관하기 때문에 안전하다.

---

4) XSS와 CSRF (쿠키가 취약한 이유)

✔ XSS (Cross-Site Scripting)

악성 스크립트가 웹페이지에서 실행되는 공격.
document.cookie로 쿠키를 탈취할 수 있다.

해결:
HttpOnly 옵션을 설정하면 JS로 쿠키를 읽을 수 없게 된다.

---

✔ CSRF (Cross-Site Request Forgery)

쿠키가 자동 전송되는 특성을 이용하여
사용자가 의도하지 않은 요청을 서버로 보내는 공격.

예:

 

<img src="https://bank.com/transfer?to=hacker&amount=1000000" />

로그인 쿠키가 자동 전송 → 서버는 정상 요청으로 착각.

해결:

• 쿠키에 SameSite 옵션 설정
• CSRF Token 사용

---

5) localStorage / sessionStorage

✔ localStorage

• 브라우저에 영구적으로 저장되는 데이터
• 새로고침 / 탭 닫기 / 브라우저 종료 후에도 유지
• 서버로 자동 전송되지 않음
• JS로 접근 가능 → XSS 취약

사용 예:
다크모드 설정, 비로그인 장바구니, 사용자 환경설정 등

---

✔ sessionStorage

• 탭 단위로 저장되는 데이터
• 탭을 닫으면 삭제됨
• 다른 탭과 공유되지 않음
• 서버로 자동 전송되지 않음
• JS로 접근 가능 → XSS 취약

사용 예:
회원가입 단계(step form) 임시 저장, 페이지 이동 중 임시 데이터

---

🔥 최종 요약 

 

React의 state는 컴포넌트 메모리에 존재하기 때문에 새로고침 또는 언마운트 시 사라진다.

 

지속되어야 하는 데이터는 브라우저 저장소(Cookie, localStorage, sessionStorage)에 저장해야 한다.

 

쿠키는 서버와 자동으로 데이터를 주고받는 저장소지만, JS로 접근 가능한 특성 때문에 XSS와 CSRF에 취약할 수 있다. 이를 해결하기 위해 HttpOnly, SameSite 옵션을 사용한다.

 

세션은 사용자 정보를 서버에 저장하고, 쿠키에는 세션 ID만 저장하는 구조로 쿠키의 보안 문제를 해결하며 안전하게 인증 상태를 유지할 수 있게 한다.

 

localStorage는 브라우저에 영구 저장되고, sessionStorage는 탭 단위로 관리된다. 두 저장소 모두 서버에 자동 전송되지 않기 때문에 UI 상태나 임시 데이터 저장에 적합하다.