하얀 코딩

자바스크립트에서의 모듈은 코드의 재사용성을 높이고, 유지 보수성을 향상시키기 위해 관련 있는 함수, 객체, 클래스 등의 코드 덩어리를 하나의 단위로 묶은 것을 말합니다. 모듈 시스템의 도입 이전에는 자바스크립트에서 코드의 모든 부분이 전역 범위에 있었기 때문에 변수 이름이 겹치는 등의 문제가 발생할 수 있었습니다. 모듈은 이러한 문제점을 해결하기 위해 도입되었고, 코드의 구조를 개선하며 개발자들이 더 큰 규모의 애플리케이션을 구축할 수 있게 해줍니다. 자바스크립트의 모듈은 주요 특징 및 이점이 있습니다. 모듈은 하나의 파일입니다. 브라우저에서 import ,export 지시자를 사용하려면 같은 속성이 필요합니다. 모듈은 아래와 같은 특징을 지닙니다. 모듈은 자신만의 스코프를 갖습니다. 모듈 간 기능 공유..

본 내용은 공식문서를 번역하여 가져왔습니다. https://reactrouter.com/en/main/routers/create-browser-router#routes createBrowserRouter v6.15.0 createBrowserRouter This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack. It also enables the v6.4 data APIs like loaders, actions, fetchers and more. Due to the decoup reactrouter.com 모든 ..

React Router v4 이후의 버전에서 웹 어플리케이션의 라우팅을 지원하는 주요 컴포넌트입니다. BrowserRouter는 HTML5의 History API를 사용하여 UI를 동기화해주며, URL을 직접 조작하면서도 페이지 전체 리로드를 하지 않는 SPA (Single Page Application)를 구현할 수 있게 합니다. 이 예제는 React Router v6 기준 사용법입니다. import { BrowserRouter, Route, Link } from 'react-router-dom'; function App() { return ( Home About Users ); } function Home() { return Home; } function About() { return About; }..

useMatch는 React Router v6 이후 버전에서 제공하는 hook입니다. 이 hook을 사용하면 현재 위치가 주어진 경로와 일치하는지 판별할 수 있습니다. 만약 일치한다면 match 객체를 반환하고, 그렇지 않으면 null을 반환합니다. import { useMatch } from "react-router-dom"; function NavigationLink({ to, children }) { let match = useMatch(to); return ( {match ? {children} : {children}} ); } 이 예시에서 NavigationLink 컴포넌트는 주어진 to 경로와 현재 위치가 일치하는 경우 아이템을 텍스트(span)로 표시하고, 일치하지 않는 경우 링크(a)로 표..

JS의 URLSearchParams를 React Hook이라고 보면 되겠습니다. https://white120.tistory.com/85 [JavaScript - 25] URLSearchParams URLSearchParams는 웹 API의 일부로 URL의 검색 매개 변수(query parameters)를 쉽게 다룰 수 있게 도와주는 유틸리티 클래스입니다. 이것은 주로 URL의 ? 뒤에 오는 쿼리 문자열을 파싱하거나 조작할 때 유용 white120.tistory.com useSearchParams는 React Router (특히 v6 이후 버전)에서 제공하는 hook 중 하나입니다. 이 hook을 사용하면 현재 URL의 검색 매개 변수(search parameters)에 쉽게 액세스하고 조작할 수 있습니..

URLSearchParams는 웹 API의 일부로 URL의 검색 매개 변수(query parameters)를 쉽게 다룰 수 있게 도와주는 유틸리티 클래스입니다. 이것은 주로 URL의 ? 뒤에 오는 쿼리 문자열을 파싱하거나 조작할 때 유용합니다. 여러가지 메서드 중에 일부 기능 및 사용법을 알아보겠습니다. 초기화 const params = new URLSearchParams("q=search&order=desc"); 특정 키의 값 얻기 const qValue = params.get("q"); // "search" 모든 키의 값 얻기 for (let [key, value] of params) { console.log(key, value); } 키 추가 / 업데이트 params.set("newKey", "ne..

컴포넌트를 먼저 알아야 이해가 되는 내용입니다. https://white120.tistory.com/83 [React - 11] Outlet 컴포넌트는 React Router v6에서 도입된 기능입니다. 이 컴포넌트는 중첩 라우팅 (nested routing)에서 부모 라우트 내에서 자식 라우트 컴포넌트가 어디에 렌더링될지를 지정하는 위치를 나타냅니다. white120.tistory.com 라우터에서도 state 값이나 일반 값을 전달할 수 있습니다. 원하는 경우 context provider를 만들 수 있지만 Outlet에 기본 제공되는 context 속성을 사용할 수 있습니다. //자식, 자손에게 {loading: true}를 전부 공유한다. 자손컴포넌트에서 위의의 context prop을 가지려면 ..

컴포넌트는 React Router v6에서 도입된 기능입니다. 이 컴포넌트는 중첩 라우팅 (nested routing)에서 부모 라우트 내에서 자식 라우트 컴포넌트가 어디에 렌더링될지를 지정하는 위치를 나타냅니다. 이를 사용하면, 다른 경로에 대한 서로 다른 하위 컴포넌트를 조건부로 렌더링할 수 있습니다. 컴포넌트가 배치된 곳에서 현재 경로와 일치하는 자식 라우트 컴포넌트가 렌더링됩니다. 사용 예시 import { BrowserRouter as Router, Route, Routes, Outlet } from 'react-router-dom'; function App() { return ( ); } function Layout() { return ( {/* ... 네비게이션 링크 ... */} ); } ..