728x90 반응형 react21 [React] 리액트 훅 - 커스텀 훅(Custom Hook) 📌 사용자 정의 훅(커스텀 훅)React에서 커스텀 훅(Custom Hook)은 상태 로직(stateful logic)을 재 사용할 수 있도록 하는 기능이다. 이는 여러 컴포넌트에서 공통적으로 사용되는 상태 로직을 추출하여 하나의 함수로 만들어 사용할 수 있도록 한다. 커스텀 훅은 보통 use라는 접두사를 사용하여 함수의 이름을 정의하며, React의 기본 내장 훅(useState, useEffect 등)을 이용하여 구현된다. JSX 코드나 렌더링과 관련된 코드를 포함해서는 안 되며, 컴포넌트 내부나 외부에서 호출하여 사용한다. 커스텀 훅을 사용하면 코드의 중복을 줄이고, 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.예를 들어, API 호출, 폼 데이터 관리, 타이머/애니메이션 등의 다양한 기능을 .. 2024. 9. 2. [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] 리액트 훅 - useContext(전역 상태값 공유) 📌 useContext 훅React 컴포넌트는 부모에서 자식으로 props를 통해 데이터를 전달해야한다.이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다.중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... useContext() 훅은 리액트에서 상태를 전역적(globally)으로 사용할 수 있도록 해.. 2024. 8. 29. [React] 리액트 훅 - useReducer(관리 코드 컴포넌트 외부 분리) 📌 useReducer 훅React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다.useState와 마찬가지로 상태를 관리하지만,컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해준다.State 업데이트 로직을 또다른 파일에 작성해서(분리), 분리된 파일을 불러와서 사용하는 것도 가능🔎 useReducer를 사용한 경우컴포넌트.. 2024. 8. 28. [React] 리액트 이벤트 처리 - 핸들러, 컴포넌트 상태(useState), 단방향 바인딩 📌 이벤트 핸들링 / 이벤트 핸들러이벤트 핸들링 : 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이벤트 핸들러 : 이벤트를 처리하는 함수 (onClick, onSubmit 등과 같은 이벤트 프로퍼티에 함수 형태로 전달)📌 이벤트 핸들러 (단방향 데이터 흐름)컴포넌트에서 특정 DOM 요소에 이벤트가 동작하도록 하려면, 해당 DOM 요소에 이벤트 핸들러를 설정해야 합니다. HTML 엘리먼트의 이벤트는 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다.예를 들어, 클릭 이벤트는 onClick으로 설정합니다. 리액트에서 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 흐릅니다. 이벤트 핸들러도 동일한 원칙에 따라 작동하며, 부모 컴포넌트는 자식 컴포넌트에 이벤트 핸들러 함수를 전달하.. 2024. 8. 26. [JavaScript] 자바스크립트 ...Spread 연산자(Spread Operator) - 배열, 객체, 함수, rest 파라미터 스프레드 연산자 (. . .)세개의 점(. . .)으로 이루어진 연산자는기존 배열객체의 값을 그대로 복사해와서 사용할 수 있는 연산자라고 할 수 있다.객체는 이런 spread 연산자를 많이쓰고 배열은 원본을 건드리지 않고 사본을 만들어주는 내장함수 (map, filter, reduce, concat) 을 통해 다양한 처리를 할수 있다. 배열 복제 · 병합 · 변경 · 추가객체 복제 · 병합 · 변경 · 추가 함수 매개인자rest 파라미터 - 함수rest 파라미터 - 객체 · 배열let array = [1,2,3,4,5];/* ... ➡️ 스프레드 문법(점 3개) 배열 안에 있는 항목들(요소들)을 전부 꺼내준다. 즉 [...array]은 array에 있는 항목을 전부 꺼내 .. 2024. 8. 21. [React] 리액트 내장 컴포넌트(Fragment, Profiler, StrictMode, Suspense, lazy) 내장 컴포넌트리액트는 JSX에서 사용할 수 있는 몇 가지 내장 컴포넌트를 제공합니다.내장 컴포넌트설명..., 또는 ... 로 표기하며, 여러 JSX 노드를 함께 그룹화할 수 있습니다.여러 JSX 노드를 하나의 그룹으로 묶고 싶을 때 사용하는 컴포넌트리액트 컴포넌트가 얼마나 빠르게 렌더링되는지를 측정하고, 성능을 분석할 수 있게 도와주는 컴포넌트개발 중에 잠재적인 문제를더 빨리 찾아내고 해결할 수 있도록 돕는 컴포넌트React.lazy()자식 컴포넌트를 로딩하는 동안 fallback을 표시할 수 있습니다.자식 컴포넌트를 비동기적으로 로딩할 때, 로딩이 완료되기 전까지 보여줄 화면을 지정 내장 컴포넌트 사용방법 (import)리액트에서 기본 태그나 내장 컴포넌트들을 사용하기 위해서는 import를 통해 해당.. 2024. 8. 21. [React] React Vite TypeScript 개발환경 세팅하기 (Vite 설정 파일 - root: "./" 변경) 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/214 [React] Vite 를 이용한 React + Typescript 실행환경 세팅하기비트(Vite)란?Vite는 웹 개발을 위한 빠르고 간단한 빌드 도구입니다. Vue.js의 창시자인 Evan You가 개발하였으며, 이후 React, Svelte 등 다양한 프레임워크와 라이브러리에서 사용할 수 있도록creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기"📁components" 폴더 (main.tsx)"📜index.html" 파일"📜vite.config.ts" 파일"📜tsconfig.json" 파.. 2024. 8. 17. 이전 1 2 3 다음 728x90 반응형
