Navigation State

Query Param 대신 State 활용하기

 

Query Param의 장단점

// 예: Angular
this.router.navigate(["/work/detail"], {
  queryParams: { backDts: "home" }
});

• 이 경우 URL은 다음과 같이 노출됩니다.

/work/detail?backDts=home

장점

• 새로고침해도 값 유지
• 북마크나 공유 가능한 URL 생성 용이
• SEO(검색 엔진 최적화)에 긍정적인 영향

단점

• 주소창에서 값이 그대로 노출됨
• 유저가 임의로 수정 가능 → 예상치 못한 동작
• 민감한 값이나 내부 상태를 담기엔 보안상 취약

즉, 공유해야 하는 값에는 적합하지만, 임시 상태나 보안이 필요한 값에는 적합하지 않습니다.

 

---

 

State

라우팅 시 state 옵션을 사용하면, 데이터를 URL에 보이지 않게 전달할 수 있습니다.

브라우저의 history 객체에만 저장되기 때문에 주소창에는 드러나지 않습니다.

Angular 예시

// A 컴포넌트 → 값 전달
this.router.navigate(["/work/detail"], {
  state: { backDts: "home" }
});

// B 컴포넌트 → 값 수신
const nav = this.router.getCurrentNavigation();
console.log(nav?.extras.state?.["backDts"]); // "home"

React 예시

// A 컴포넌트 → 값 전달
navigate("/work/detail", { state: { backDts: "home" } });

// B 컴포넌트 → 값 수신
const location = useLocation();
console.log(location.state?.backDts); // "home"

 

두 프레임워크 모두 개념은 동일합니다.

URL에는 /work/detail만 보이고, 내부적으로만 backDts: "home" 값이 전달됩니다.

 

---

 

State의 특성

• URL 비노출: 주소창에 값이 보이지 않아 UX와 보안 측면에서 깔끔함
• 새로고침 시 사라짐: history에만 저장되므로 페이지 리로드 시 유지되지 않음
• 일시적 데이터에 적합: 모달 여부, 이전 페이지 컨텍스트 등 일회성 데이터

즉, state는 “한 번 전달하고 끝나는 데이터”에 최적화되어 있습니다.

 

---

 

예시 시나리오

• 뒤로 가기 컨텍스트 관리
  • 예를 들어 /work/list에서 /work/detail로 들어갔다가, 다시 돌아갈 때 어떤 탭으로 돌아갈지(home, myWorks 등)를 알려주는 값.
  • URL에 굳이 노출할 필요가 없고 내부적으로만 쓰면 충분합니다.
• 임시 UI 상태 전달
  • 특정 버튼을 눌러 모달을 연 상태에서 라우팅했을 때, 도착 페이지에서도 모달을 띄워야 하는 경우
  • 스크롤 위치 같은 값 (새로고침 시 초기화돼도 무방)
• 보안/프라이버시 강화
  • 내부 식별자, 권한 관련 플래그 등 유저가 알 필요 없는 데이터
  • 특히 관리자 페이지나 내부용 툴에서 민감한 데이터를 다룰 때 유용

 

---

 

Query Param vs State

 

항목	Query Param	State
URL 노출	보임	안 보임
새로고침 유지	유지됨	사라짐
북마크/공유	가능	불가
SEO 영향	있음	없음
보안/프라이버시	약함	강함

 

 

• 공유가 필요한 값은 Query Param, 임시적이거나 숨겨야 하는 값은 State
• 기본적으로 state로 전달: 임시 상태 값은 무조건 state 활용
• 필요 시 sessionStorage/localStorage 보완: 새로고침에도 유지해야 한다면 보조 저장소와 병행
• 중요한 값은 반드시 서버 검증: 프론트 단에서만 신뢰하지 말 것