728x90 반응형 📌 Front End/└ React36 [React] 리액트 동적 라우팅(Dynamic Routing) - useLocation, useNavigate, useParams, useSearchParams 📌 동적 라우팅(Dynamic Routing)웹 애플리케이션에서 클라이언트의 요청에 따라 경로를 동적으로 처리하는 라우팅 방식입니다.사용자의 입력, 상태 변화, 또는 다양한 조건에 따라 서버가 어떤 페이지나 리소스를 제공할지 결정합니다.이는 사전에 경로가 고정된 정적 라우팅(Static Routing)과 다르게,실행 시점에 라우팅 규칙이 결정되는 특징이 있습니다. Path Parameter(경로 매개변수) URL에서 하나의 정보를 전달할 때 사용합니다. 특정 목록에서 상세 페이지로 이동할 때 /about/sohyun처럼 사용Query Parameter(쿼리 매개변수) URL에서 여러 정보를 전달할 때 사용합니다. 페이지네이션이나 필터링 기능을 구현할 때 /about?name=sohyun처럼 사용 .. 2024. 9. 6. [React] 리액트 라우터 돔(React Router DOM) - BrowserRouter, Routes, Route, Outlet, Link, NavLink 📌 리액트 라우터 돔(React Router DOM)리액트 애플리케이션에서 페이지 간 이동(라우팅)을 쉽게 처리하기 위한 라이브러리입니다. 이 라이브러리를 사용하면 리액트 앱을 여러 페이지처럼 구성하고, 각 페이지의 URL 경로를 정의할 수 있습니다.📌 SPA(Single Page Application)SPA는 기존 웹사이트와 다르게 한 개의 HTML 페이지에서 모든 작업을 처리하는 방식입니다. 일반 웹사이트는 사용자가 새로운 페이지로 이동할 때마다 페이지 전체를 새로고침하지만, SPA는 필요한 부분만 업데이트합니다. 이렇게 하면 속도도 빠르고 트래픽도 절약할 수 있습니다.📌 React Router 주요 패키지react-router : 웹과 앱 모두에서 사용할 수 있는 기본 라우터 라이브러리reac.. 2024. 9. 4. [React] 리액트 Children Props(props.children 사용) 📌 Children Props리액트 모든 컴포넌트에서 children props를 사용할 수 있습니다. children props란 컴포넌트의 여는 태그와 닫는 태그 사이의 내용입니다. 사용예시이 태그에서 Hello world! 문자열이 Welcome 컴포넌트의 children props로 전달이 되어 접근할 수 있습니다.function App() { return Hello world!}function Welcome(props) { return {props.children};}📌 합성(Composition)과 props.children 🔎 children 이란?props.children은 React 컴포넌트의 특별한 props입니다.컴포넌트가 다른 컴포넌트를 포함할 때, 그 안에 들어가는 내용을.. 2024. 9. 3. [React] 리액트 훅 - 커스텀 훅(Custom Hook) 📌 사용자 정의 훅(커스텀 훅)React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재 사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 내장 훅(useState, useEffect 등)을 이용하여 구현된다. JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 .. 2024. 9. 2. [React] 리액트 훅 - useDeferredValue, useTransition(상태값 지연, 상태변화 함수 지연) 📌 useDeferredValue, useTransition 훅이 두 훅은 React 애플리케이션을 더 부드럽고 빠르게 만들어 주는 도구입니다.useDeferredValue 상태 값에 우선순위를 낮추는 HookuseTransition 상태 변화를 일으키는 함수의 우선순위를 낮추는 Hook📌 useDeferredValue상태값 업데이트를 지연시켜 UI가 더 부드럽게 동작하도록 합니다.상태가 바뀔 때, 그 변경 사항을 즉시 반영하지 않고 잠시 미뤄서 화면이 끊기지 않게 합니다.사용자가 입력을 할 때, 그 입력으로 인해 화면이 바뀌는 것을미뤄서 화면이 끊기지 않고 더 부드럽게 보이도록 합니다. 📝 useDeferredValue 형식import { useDeferredValue } from 'react';.. 2024. 8. 30. [React] 리액트 훅 - useRef(리렌더링 방지 DOM요소 접근) 📌 useRef 훅이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 주로 DOM 요소나 외부 라이브러리의 인스턴스와 같이 렌더링과는 직접적으로 관련이 없는 값들을 저장할 때 사용됩니다.useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다.👉 성능향상 변화는 감지하지만 렌더링 발생 ❌ 👉 DOM요소에 손쉽게 접근 (ref속성 사용)👉 전생애주기를 통해 값 유지언마운트 되기전까지는 값을 계속 기억함// ▶ 객체 생성// → {current: 초기값} 을 지닌 객체가 반환됨 const 변수명 = useRef(초기값)// ▶ DOM .. 2024. 8. 30. [React] 리액트 훅 - useMemo, useCallback(메모이제이션 값, 함수 반환) 📌 useMemo, useCallback 훅useMemo, useCallback은 모두 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.useMemo 계산된 값을 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 계산합니다. useCallback 함수를 기억해 두고, 의존성 배열에 있는 값이 바뀔 때만 새로 함수를 생성합니다.useMemo(() => 함수, 의존성 배열);useCallback (함수, 의존성 배열);🤔 리렌더링(re-rendering)React는 Virtual DOM을 사용하고 있다. 따라서 리렌더링이 되는 조건에 충족되는 상황이라면, 이전의 Virtual DOM과 현재의 Virtual DOM을 비교하여 변경된 값에 대해 DOM 트리를 업데이트 해준.. 2024. 8. 30. [React] 리액트 훅 - useEffect(조건부 실행, 자원 정리) 📌 useEffect 훅리액트 컴포넌트가 렌더링된 후에 비동기적으로 특정 작업을 처리하는 리액트 훅입니다.컴포넌트가 mount, update, unmount '될 때' 실행된다.useEffect 훅은 컴포넌트의 렌더링과 동시에 실행되지 않고, 렌더링이 완료된 후에 작업을 수행합니다.🤔 생명주기(Lifecycle)생명주기는 컴포넌트가 다음과 같은 단계들을 거치는 것을 의미Mounting (마운트) : 컴포넌트가 처음으로 DOM 화면에 추가되는 시점Updating (업데이트) : 컴포넌트의 상태(state)나 속성(props)이 변경되어 다시 렌더링 되는 시점Unmounting (언마운트) : 컴포넌트가 DOM 화면에서 제거되는 시점 🤔 클래스형 컴포넌트의 생명주기 메서드클래스형 컴포넌트에서는 다음과 .. 2024. 8. 30. [React] 리액트 훅 - useContext(전역 상태값 공유) 📌 useContext 훅React 컴포넌트는 부모에서 자식으로 props를 통해 데이터를 전달해야한다.이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다.중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... useContext() 훅은 리액트에서 상태를 전역적(globally)으로 사용할 수 있도록 해.. 2024. 8. 29. 이전 1 2 3 4 다음 728x90 반응형
