NewBean의 웹과 콩나무
immer 1. immer - React와 함께 사용되며, JavaScript에서 불변성을 관리하기 위한 라이브러리 중 하나 - 상태 관리 및 업데이트를 보다 간편하게 만들어줌 - 불변성을 지키면서 상태 업데이트 가능 2. 사용방법 ※ immer 사용 시, 설치 필요 (npm install immer or yarn add immer) - produce 함수를 사용하여, 업데이트할 데이터를 전달하고, 업데이트할 내용을 함수 안에서 변경함 const userState = { name: 'Kim', age: 15, }; const newState = userState(state, (draft) => { draft.age += 1; }); console.log(newState); - 중첩된 객체와 배열의 업데이..
React 프로젝트 생성 원하는 프로젝트에서 cmd에 들어간 후, npx create-react-app 프로젝트명 입력
useParams 1. useParams - React 애플리케이션에서 동적 URL 파라미터를 추출하는데 사용되는 훅 - 사용자 정의 데이터를 전달하는 데 유용 - 이를 통해, 블로그 게시물 ID or username과 같은 정보를 URL에 포함시킬 수 있음
NavLink 1. NavLink - React Router에서 제공하는 컴포넌트 - 네비게이션 메뉴 or 링크를 만들 때 사용함 2. 예시 - RouterEx.js - NavLink에서 to로 이동할 URL을 지정 import React from "react"; import { Routes, Route, Navigate, useLocation, NavLink, } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export default function RouterEx() { const location = useLocati..
useLocation 1. useLocation - React Router 라이브러리의 일부 - React 기반 웹 애플리케이션에서 현재 URL의 정보를 가져오는 데 사용되는 훅 - 현재 경로 및 관련 정보에 쉽게 엑세스할 수 있도록 도와줌 2. 예시 - RouterEx.js - location.pathname으로 현재 경로를 나타냄 import React from "react"; import { Routes, Route, Navigate, useLocation } from "react-router-dom"; function HomeMainPage() { return ( Home, Main ); } function HomeAboutPage() { return ( HOME, ABOUT ); } export..
Router※ 24.05.04 부로 수정하였습니다. 1. RouterRouter란? 사용자의 웹 애플리케이션 내에서 다양한 URL 경로에 따라 다른 컴포넌트를 렌더링하기 위한 도구입니다.React 애플리케이션의 라우팅을 관리하고, URL에 따라 애플리케이션의 다른 부분을 표기할 수 있게 합니다.이를 통해, 사용자가 애플리케이션을 사용할 때, 뒤로 가기, 앞으로 가기, 북마크 등과 같은 브라우징 기능 사용 가능합니다. ※ Router를 사용하려면, React Router 라이브러리를 설치해야 합니다. 2. Router 특징Router에는 여러가지 컴포넌트가 존재합니다.BrowserRouter컴포넌트 최상위에 작성되어 경로 변경에 대해 여러 편의 기능을 제공합니다.Routes여러 Route 컴포넌트를 ..
