gloria94682015

2026.01.04 - [front/react] - [react] React Router (BrowserRouter, Routes, Route, Link, Outlet, useParams) 📍 React Router v6.4 Data API 라는 새로운 방식이 도입됨.라우터 설정을 자바스크립트 객체 형태로 정의 createBrowerRouter 와 RouterProvider 📍 createBrowserRouter ?웹 애플리케이션의 모든 경로 {path)와 해당 경로에서 보여줄 컴포넌트 (Element)를 정의하여 하나의 라우터 객체를 만드는 함수. 작동 방식 :경로와 컴포넌트를 담은 자바스크립트 배열을 인수로 받음.브라우저의 History API를 사용하여 URL 변경을 감지하고 관리할 수 있는 라..

📍 Custom Hook함수임. --> 뭔가 다른 js 내에 함수 등록해놓고 import 해서 가져다 쓰는 그런 느낌???여러 컴포넌트에서 공통으로 사용하는 상태관리나 효과 로직을 묶어 재사용할 수 있게 해주는 훅.useTttt 같이, use 로 시작해야한다는 규칙. -- > useXxxx UseYyyy 와 같은 네이밍 규칙을 따름. 구분Custom Hook일반 사용자 함수이름 규칙반드시 use 로 시작, useXxxx Hook 사용 가능 여부Hook 사용 가능Hook 사용 불가능React 렌더링 관련컴포넌트 렌더링 주기에 반응렌더링에 반응하지 않음.주요 목적State, Effect, 로직을 컴포넌트 간에 재사용 리턴 값상태값과 조작함수를 함께 반환 // import { useState, useE..

📍 useCallbackcallback 함수를 memoize (메모이즈)함수 자체 (function object )를 캐싱하는 훅.함수를 다시 만들지 않는 다는 게 핵심.!!함수의 실행 결과를 캐싱하는 것은 --> useMemo Hook사용 방법 useCallback(callback, dependencies)callback :: 함수를 기록. dependencies :: 이 dependencies 안에 있는 값이 변동이 되면 그때 --> callback 함수를 실행.만약 dependencies 가 비어있으면 --> 한번 만들고 바꾸지 않을꺼라는 것.더보기useEffect(() => { console.log("same handleClick reference?", prevRef.current ===..

📍 useReducer리액트의 상태(state) 관리 훅 이다.useState 보다 복잡한 상태 로직을 관리할 때 사용함.-----------------------------------------------------------------------------------------기본 개념 및 사용 방법const [state, dispatch] = useReducer(reducer, initalState);state : 현재 상태 값dispatch : 상태를 변경하기 위해 action 을 전달하는 함수reducer : 상태를 업데이트하는 로직을 담은 함수initialState : 초기 상태 값 --> 객체 형태로 넣기!-----------------------------------------------..

📍 useContext상태를 전역적으로 관리하는 방법을 제공함.useState Hook 과 함께 사용하면 깊이 중첩된 컴포넌트 간 상태를 더 쉽게 공유할 수 있음.상태는 해당 상태에 액세스해야하는 스택의 가장 높은 부모 컴포넌트에서 보관되어야 함.📍 Props drilling 컴포넌트3 에서 User 를 사용하려면, 반드시 그 전에 있는 컴포넌트2에서 3으로 User 를 넣어줘야 제대로 3에서 User를 사용할 수 있단 말임. 만약 10단계를 거쳐서 component 가 있다면,10단계의 Props drilling 이 필요한 것임.--> 이러한 이유로, useContext 가 생겨남. 📍 useContext 사용해보기import { createRoot } from "react-dom/clien..

📍 React Hook ??함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 기능. 📍 useState컴포넌트 내부에서 상태(state)를 관리할 때 사용.초기화const [name, setName] = useState("홍길동");const [ 스테이트 변수, 이 스테이트 변수를 update 를 할 수 있는 함수 ] = useState("초기값 넣기");--> name = "홍길동" 으로 초기값이 넣어진 상태로 시작함.단일 문자, 단일 숫자, 배열, 객체 모두 상태값 관리 가능.setCar(previousState => { return { ...previousState, color:"white" }; } );** pr..

📍 useTransition Hook이 훅을 사용하면 대규모 업데이트 중에도 리액트 앱의 반응성을 유지하는 데 도움이 됨.이런 경우에 사용UI를 정지시킬 수 있는 느린 작업당장 중요하지 않은 업데이트표시되는데 시간이 걸리는 검색 결과/** 랜더링이 늦어지면 Loading... 이 뜨게 됨. text는 즉시 랜더링 되지만, 지연이 발생하게 되면 isPending 의 값이 계속해서 true 이기 때문에Loading... 의 랜더링은 병합되거나 생략될 수 있음. 계속 ture라서 변동하지를 않을 테니까~ ) */--> 랜더링 횟수가 줄어들게 됨!! import { useState, useTransition } from "react";import {createRoot} from "react-dom/clie..

📍 react router ?? 리액트 어플리케이션에 라우팅 기능을 제공하는 라이브러리단일 페이지 어플리케이션에서 여러 페이지를 만듦URL 매개 변수 및 Query String 처리브라우저 History 및 탐색 관리중첩된 경로 레이아웃 만들기인증을 위한 보호된 경로 구현설치 방법?npm install react-router-dom 📍 BrowserRouter, Routes, Route, Link, Outlet, useParams import { BrowserRouter, Routes, Route, Link, Outlet, useParams } from 'react-router-dom';사용할 때 import 해줘야함!BrowerRouterRoutes , RouteLinkOutlet { /** 추가..

📍 inline 에 css 적용하려면?{ {color:"blue"} }> 하이루 ! 리액트에서 style 을 넣으려면 객체로 넣어야하니까!! 중괄호가 두개 있어야 함. 📍 css 객체를 밖에서 선언하고 가져올 수도 있음.const style2 = { color : 'red', backgroundColor : 'yellow', padding : '5px' }{ style2 }>style obj style 📍 외부 css 파일을 불러올 수도 있음.import './style1.css';body { background-color: green; color : orange;} 📍 css 모듈을 사용하는 방법모듈 내부의 css 는 --> 해당 css..

📍 React Portal컴포넌트를 DOM Tree의 다른 위치에 렌더링할 수 있게 하는 기능.모달, 레이어 팝업에서 많이 사용함.import { useState } from 'react';import { createRoot } from 'react-dom/client';import { createPortal } from 'react-dom';function Modal( {children} ) { const style = { position: 'fixed', top : 0, left : 0, right : 0, bottom : 0, backgroundColor : 'rgba(0,0,0,0.5)', display..