개발나라 스용공주

이번 글은 동적경로의 종류와 사용법에 대한 글이다.이번 글의 예제와 연계된 실습 내용을 담은 글은 이번 글 맨 아래에 링크가 첨부되어있다. [ 동적 경로(Dynamic Segments) ]동적인 데이터를 포함하고 있는 경로로 페이지 링크가 아래 예시와 같이 변하면서 다른 페이지를 렌더링할 때 이를 동적경로라고 부른다.  [ 동적 경로의 종류 ]ex. '~/product/1' (1번 상품 페이지) , '~/product/2' (2번 상품 페이지)=> 이때 맨 뒤에 오는 숫자에 따라 렌더링하는 상품이 변경됨=> 1. URL Parameter : 위의 예시 방식으로 /(슬래쉬) 뒤에 아이템의 id를 명시(잘 변경되지 않는 아이템의 id 등의 값의 주소를 명시할 때 사용됨)  2. Query String : U..

이번 글은 페이지를 이동시키는 함수를 반환해주는 useNavigate()의 사용법에 대한 글이다. 이 블로그 포스팅과 연결되는 내용이다.https://hwangseoyoung.tistory.com/214 BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하" data-og-host="hwangseoyoung.tistory.com" data-og-source-url="https://hwangseoyoung.tistory.com/214" data-og-url="https://hwangseoyoung.tistory.com/214" data-og-image="https://scrap.kakaocdn.net/dn/bJ1SH2/hyYCd7JCJa/BPZSbYCgSiZJ6zIEcX3oC1/img.png..

이번 글은 페이지를 이동시켜주는 라우트(Route)를 어떻게 사용하는지에 대한 글이다.  먼저 아래 코드와 같이 설정을 해준다. [ main.jsx ]=> BrowserRouter : 브라우저의 현재 주소를 저장하고 감지하는 역할import { BrowserRouter } from "react-router-dom"; App 컴포넌트를 감싸줌createRoot(document.getElementById("root")).render( ); BrowserRouter가 전체를 감싸고있음 [ Routes 컴포넌트 ]Routes 컴포넌트는 페이지를 이동할 때 사용하는 컴포넌트이다. ※ 이때 Routes 컴포넌트는 주의사항 2가지가 있다.첫번째는 안에는 만 들어가야 오류가 발생하지 않는다.그리고 두번째는..

이번 글은 웹 스토리지에 대한 글이다.  [ 웹 스토리지란? ]리액트로 만든 사이트를 새로고침하면 state에서 담고 있는 값이 초기화되어 데이터가 사라지는 것을 확인할 수 있다.이때 데이터를 사라지지 않도록 웹에 저장할 수 있게 해주는 공간을 웹 스토리지라고 한다. 웹 브라우저에 기본적으로 내장되어 있는 데이터베이스로 별도의 프로그램이나 라이브러리의 설치가 필요하지 않고 자바스크립트 내장함수만으로 접근이 가능하다.   [ 웹 스토리지 종류 ]웹 스토리지는 SessionStorage와 LocalStorage 2가지가 존재한다.2가지 모두 값을 저장하고 꺼내고 기본적인 동작 방법이 동일하다.차이점은 사용하는 명칭도 다르지만 데이터를 어디에 저장하고 언제 초기화되는지에 따라 두 스토리지의 차이점이다.  [ ..