728x90 반응형 분류 전체보기286 [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. [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] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce() 리스트 컴프리헨션(List Comprehension)배열이나 리스트를 간결하게 생성하는 문법을 의미합니다.리스트 컴프리헨션은 리스트를 짧고 직관적인 방식으로 생성하거나 변형할 수 있는 문법입니다.메서드설명map()배열의 각 요소를 변형하여 새로운 배열 생성(원본배열 유지)filter()조건에 맞는 요소만을 포함하는 새로운 배열 생성(원본배열 유지)find()배열에서 조건을 만족하는 첫 번째 요소의 값을 반환조건에 맞는 요소가 없다면 undefined를 반환(원본배열 유지)from()유사 배열 객체나 반복 가능한 객체를 배열로 변환(원본배열 유지)fill()배열의 모든 요소를 특정 값으로 채우기시작과 끝 인덱스를 지정하여 배열의 일부만 채운다.(원본배열 변경)reduce()배열의 요소를 누적하여 단일 값을.. 2024. 8. 22. 이전 1 ··· 5 6 7 8 9 10 11 ··· 32 다음 728x90 반응형
