728x90 300x250 SMALL Front-end/React65 Callback Ref : DOM 참조를 더 유연하게 관리 앞서 useRef를 활용해 DOM요소를 참조하는 방법을 살펴봤는데 상황에 따라 정적인 참조 방식으로는 해결하기 어려운 문제가 있을 수 있다. 이럴 때 더 동적이고 유연한 방식으로 DOM참조를 관리할 수 있는 Callback Ref가 유용하다.DOM 요소에 대한 참조를 설정하거나 업데이트 할 때 더 많은 제어권을 가질 수 있다. Callback ref는 React에서 DOM 요소나 컴포넌트의 참조를 관리하는 또 다른 방법으로 useRef와 React.createRef()를 대신해서 사용할 수 있다.일반적으로 React에서 ref를 사용하면 컴포넌트가 DOM요소를 참조하도록 설정할 수 있지만,Callback ref는 동적으로 참조를 설정하거나 특정 동작을 할 때 유용하게 사용된다. 기본 사용법:Callba.. 2024. 12. 7. useRef와 useState의 차이 React에서 useRef와 useState는 상태를 관리하고 요소를 참조하는데 사용되지만, 목적과 동작 방식이 다르다. 1. useRefuseRef는 React의 훅으로, DOM 요소나 변경 가능한 값을 참조할 때 사용된다. 특징값이 변경되어도 렌더링을 트리거하지 않음 : useRef로 저장된 값은 변경되더라도 컴포넌트가 다시 렌더링되지 않음초기화 : useRef는 인자로 초기값을 받을 수 있으며, 초기값은 .current프로퍼티로 접근할 수 있다.DOM 참조 : 주로 특정 DOM요소를 참조하거나 저장하기 위해 사용된다.변경 가능한 값 저장 : 렌더링 관련 없이 값을 유지하고 싶을 때 사용된다.사용 예시 1. DOM 참조 import React, { useRef } from "react";const A.. 2024. 12. 6. useRef : 리액트 훅 사용법 useRef는 React에서 참조(ref)를 관리하는 데 사용하는 훅이다.주로 DOM요소나 값을 참조하고자 할 때 사용된다.useRef를 사용하면 컴포넌트가 렌더링될 때마다 값이 초기화 되지 않고 계속 유지된다.useRef는 값의 변경을 렌더링에 영향을 미치지 않게 추적할 수 있다. 일반적인 상태 변수(useState)는 값이 변경될 때마다 컴포넌트를 다시 렌더링하지만, useRef는 값을 바꾸더라도 렌더링을 트리거하지 않는다.예를들어, DOM요소나 타이머 ID같은 것을 추적할 때 렌더링을 다시 트리거하지 않으면서 상태를 유지할 수 있다. useRef의 기본 개념useRef는 객체를 반환한다. 이 객체는 current라는 속성을 가지고 있으며, 이 속성에 원하는 값을 저장할 수 있다.DOM 요소에 대한 .. 2024. 12. 5. useCallback과 useMemo의 차이 useCallback과 useMemo 훅에 대해서 알아봤다. 둘 다 메모이제이션 기능을 제공하고 얼핏 같은동작을 하는것 같지만 사용하는 목적과 반환값이 다르다.구체적으로 알아보자 1. useCallback사용 목적 : 함수를 메모이제이션하여 동일한 함수 인스턴스를 재사용한다.주요 사용 이유 : 함수를 자식 컴포넌트에 props로 전달할 때, 매번 새로운 함수가 생성되지 않도로고 하고 불필요한 렌더링 방지기본 문법const memoizedCallback = useCallback(() => { // 함수 로직}, [dependencies]); memoizedCallback : 메모이제이션된 함수dependencies : 이 배열의 값이 바뀔 때만 함수가 새로 생성된다. 예시 : useCallback 사용.. 2024. 12. 4. 이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음 728x90 반응형 LIST