react20 [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. [React] 리액트 JSX(TSX) 문법 ❓리액트(React)리액트는 프론트엔드 개발을 위한 Javascript의 오픈소스 라이브러리이다. HTML, Javascript만으로도 충분히 웹을 만들 수 있는데 왜 리액트를 사용하는걸까?JavaScript에서는 DOM 을 변형시키기 위하여브라우저의 DOM Selector API를 사용해서 특정 DOM 을 선택한 뒤,특정 이벤트가 발생하면 변화를 주도록 설정해야했다. 이를 이용하여 프로젝트를 진행했을 때 규모가 커질 수록 Dom Selector를 많이 쓰게 되고,그러한 코드가 쌓여갈 수록 매우 지저분하다는 생각이 들었다.사실 하나씩 불러오는 것도 매우 귀찮았다. 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면관리하기도 힘들고, 규모가 커질 수록 성능 저하의 원인이 될 수도 있는 문제가.. 2024. 8. 17. 이전 1 2 3 다음 728x90 반응형
