개발나라 스용공주

이번 글은 동적경로의 종류와 사용법에 대한 글이다.이번 글의 예제와 연계된 실습 내용을 담은 글은 이번 글 맨 아래에 링크가 첨부되어있다. [ 동적 경로(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가지가 있다.첫번째는 안에는 만 들어가야 오류가 발생하지 않는다.그리고 두번째는..

이번 글은 현재 연도, 날짜, 요일을 불러오는 방법에 대한 글이다.  아래 코드와 같이 작성하면 된다. {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를 보내고 값..

이번 글은 리액트에서 state를 활용하는 법에 대한 글이다.  [ state란? ]state는 현재 가지고 있는 형태나 모양을 정의한 값으로 변화할 수 있는 동적인 값이다.컴포넌트의 현재 상태를 보관하는 변수이다.그래서 state의 값에 따라 렌더링되는 UI가 결정된다.  [ State 사용법 ]state 사용을 위해선 useState를 꼭 임포트 후 사용할 수 있다.import { useState } from "react";    [ State 구조 ]useState()는 새로운 state를 생성하는 함수고, 인수로는 state의 초기값을 받는다.state는 2개의 요소를 담은 배열을 반환한다.state의 현재 값과 state를 변경시키는 상태변화함수를 반환한다. import "./App.css";i..