개발나라 스용공주

이번 글은 동적경로의 종류와 사용법에 대한 글이다.이번 글의 예제와 연계된 실습 내용을 담은 글은 이번 글 맨 아래에 링크가 첨부되어있다. [ 동적 경로(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가지 모두 값을 저장하고 꺼내고 기본적인 동작 방법이 동일하다.차이점은 사용하는 명칭도 다르지만 데이터를 어디에 저장하고 언제 초기화되는지에 따라 두 스토리지의 차이점이다.  [ ..

이번 글은 현재 연도, 날짜, 요일을 불러오는 방법에 대한 글이다.  아래 코드와 같이 작성하면 된다. {new Date().toDateString()} Date()로 새로운 객체를 생성한다.문자열로 읽기 편한 형태로 렌더링하기 위해 toDateString()으로 렌더링을 해준다. (바로 Date() 자체를 출력 시 오류)

이번 글은 리액트에서 useRef을 사용하는 방법에 대한 글이다.  [ useRef란? ]useRef는 새로운 reference 객체를 생성하는 함수이다.렌더링에 영향을 미치지 않는 변수 생성 시 사용된다. ( useState() ) useRefuseState 레퍼런스 객체 생성스테이트를 생성 컴포넌트의 내부의 변수로 활용가능 리렌더링 X리렌더링 O 렌더링에 영향을 주지 않는 변수 생성 시 사용렌더링이 필요한 변수 생성 시 사용  useRef나 useState로 만든 리액트의 특수한 변수들은 컴포넌트가 리렌더링되어도 리셋이 되지 않지만 일반 변수의 경우 리렌더링 시 값이 리셋이 된다.(컴포넌트 내부의 변수가 필요하다면 렌더링의 유무에 따라 useRef 또는 useState를 사용)  current 프로..

이번 글은 리액트에서 state로 입력을 받고 처리하는 내용에 대한 글이다.  [ state 상호작용 ]사용자에게 입력받은 값을 state 변수를 상태변화로 적용시켜 해당 변수의 값을 출력하는 예제이다.완성된 예제는 아래 사진과 같이 input 안에 작성한 값이 텍스트 박스 옆에 표시된다.  1) 먼저 placeholder를 통해 텍스트 박스가 작성되기 전 "이름"이 표시되도록 한다.placeholder={"이름"}  2) 텍스트 박스에 작성되는 값에 따라 변수의 값을 변경해줘야하므로 state를 사용해야한다.이때 state는 구조분해할당을 사용해 배열을 할당받았다.const [name, setName] = useState("");  3) 이벤트를 발생시키는 이벤트 핸들러 부분이때 매개변수 e는 이벤트를..

이번 글은 리액트에서 props와 state의 상호작용에 대한 글이다.  [ props와 state의 상호작용 ]props는 부모에서 받아온 값을 객체로 반환하는 것이고 state는 현재 가진 값을 상태변화함수를 통해 변화시키며 리렌더링해주는 변수이다. 예제 1) 부모 컴포넌트 App()에 state의 값이 존재함const [light, setLight] = useState("Off"); => 자식 컴포넌트 Bulb에서 인수로써 이 state를 props로 받아옴const Bulb = ({ light }) => {} => 가져온 값을 활용한 조건식 작성{light === "On" ? ( On ) : ( Off )} => 부모 컴포넌트에 자식 Bulb를 보내고 값..