본문 바로가기

react router

React에서 스크롤 위치 저장 및 복원 기능 구현하기 리스트·기사·문서 페이지에서 뒤로가기나 라우팅 후 원래 읽던 위치로 돌아가게 하는 스크롤 저장/복원은 UX 품질을 결정짓는 요소입니다. 실무에서는 라우터, 이미지 로딩, 컨테이너 스크롤 등 다양한 변수 때문에 일관된 동작을 만들기가 쉽지 않습니다. 이 글에서는 React에서 신뢰성 있게 스크롤 위치를 저장하고 복원하는 방법을 단계별로 정리합니다.1. 핵심 아이디어원리는 단순합니다. 스크롤 이벤트로 현재 위치를 저장하고, 화면 진입 시 저장된 위치로 스크롤합니다. 브라우저 기본 복원과 충돌하지 않도록 manual 모드로 바꾸고, 레이아웃/이미지 로딩 후 복원 타이밍을 조절합니다.// 브라우저 기본 복원 끄기 (충돌 방지)useEffect(() => { try { window.history.scrollRe.. 더보기
React에서 상태 관리 없이 URL 파라미터로 데이터 전달하기 React 애플리케이션에서 상태 관리를 사용하지 않고 컴포넌트 간에 데이터를 전달해야 할 때, URL 파라미터를 활용할 수 있습니다. 이 방법은 특히 간단한 데이터나 페이지 간 정보 전달 시 유용하며, Redux나 Context API 같은 상태 관리 도구를 도입하지 않아도 됩니다.1. URL 파라미터란?URL 파라미터는 URL의 끝에 "?key=value" 형태로 붙는 쿼리 스트링(query string)을 의미합니다. 예를 들어 "/detail?item=apple"에서 item=apple이 URL 파라미터입니다. React 라우팅 라이브러리에서 이를 쉽게 읽고 사용할 수 있습니다.2. React Router를 이용해 URL 파라미터 받기React Router의 useLocation 훅을 사용하면 현재.. 더보기
React 앱에서 사용자 권한(Role-Based Access Control) 처리하기 RBAC는 복잡한 프론트엔드에서 페이지 접근, 버튼 노출, API 호출을 안전하게 통제하는 핵심 패턴입니다. 실무에서 바로 쓸 수 있는 권한 설계, 훅/컴포넌트, 라우팅 가드, 서버 연동까지 단계별로 정리합니다.1. 왜 RBAC인가역할(roles)과 권한(permissions)을 분리하면 기능 추가/변경 시 코드 수정 범위를 최소화할 수 있습니다. 또한 UI와 라우팅, API 레벨에서 일관된 통제가 가능합니다.2. 권한 모델 설계역할-권한 매핑을 한 곳에 선언합니다. 최소 권한 원칙을 지키고, 비즈니스 용어로 이름을 짓습니다.// permissions.jsexport const Roles = { ADMIN: 'admin', EDITOR: 'editor', VIEWER: 'viewer',}export.. 더보기
React 앱에 OAuth 2.0 로그인 기능 추가하기 (Authorization Code + PKCE) 이 글은 React SPA에 OAuth 2.0 Authorization Code with PKCE 방식으로 로그인 기능을 추가하는 실무 가이입니다. 공급자 벤더에 종속되지 않고 동작하는 최소 구현을 제시하며, 보안 및 운영 팁까지 간결하게 정리합니다.1. 왜 Authorization Code + PKCE 인가SPA에서 암호화된 클라이언트 비밀을 보관할 수 없기 때문에 PKCE를 적용한 Authorization Code 플로우가 권장됩니다. 흐름은 다음과 같습니다. 사용자가 로그인 버튼을 클릭합니다. 앱이 code_challenge를 생성하고 권한 서버로 리다이렉트합니다. 로그인 완료 후 콜백에서 code를 받고, code_verifier로 토큰을 교환합니다. 토큰으로 사용자 정보 API를 호출합니다.2... 더보기
React에서 Error Boundary로 오류 처리하기 프로덕션에서 갑작스런 빈 화면을 막고 사용자에게 의미 있는 대체 UI를 보여주려면 Error Boundary가 필수입니다. Error Boundary는 하위 트리 렌더링 중 발생한 오류를 잡아 폴백 UI로 전환하고, 로깅까지 연결할 수 있는 안전망입니다.1. Error Boundary가 필요한 이유- 컴포넌트 렌더/라이프사이클에서 발생한 오류로 전체 앱이 깨지는 것을 방지합니다.- 사용자에게 폴백 UI(다시 시도, 고객센터 안내 등)를 즉시 제공합니다.- 모니터링/로그 수집 도구(Sentry 등)와 연동해 장애 탐지 속도를 높입니다.2. 기본 구현 (Class 기반)import React from 'react';class ErrorBoundary extends React.Component { const.. 더보기
React Router v6의 최신 기능과 사용법 React Router v6는 선언적 라우팅을 단순화하고, 데이터 로딩/변경을 라우트 계층으로 끌어올리는 Data Router 기능(v6.4+)을 도입했습니다. 이 글은 실무에서 바로 쓸 수 있는 최신 v6 사용법과 베스트 프랙티스를 정리합니다.1. v6 핵심 변화 한눈에 보기- Switch → Routes, Redirect → Navigate, exact 제거, component/render → element로 변경되었습니다.- 중첩 라우팅 기본 탑재, 상대 경로 네비게이션 개선, 레이아웃은 Outlet으로 구성합니다.- Data Router(createBrowserRouter, loader, action, errorElement, useLoaderData, useNavigation, defer/Awa.. 더보기

티스토리툴바