728x90 300x250 SMALL Front-end312 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. useCallback : 리액트 훅 사용법 useCallback는 함수가 불필요하게 재생성되지 않도록 하고, 특정 값이 변경될 때만 새로운 함수로 교체되게 한다. 기본문법const memoizedCallback = useCallback(() => { // 함수 내용}, [dependency1, dependency2, ...]); useCallback()은 두 가지 인자를 받는다.1. 첫 번째 인자: 메모이제이션하려는 함수.2. 두 번째 인자 : 함수가 재생성되어야 할 의존성 배열. 이 배열 안의 값들이 변경될 때만 함수가 새로 생성된다. useCallback을 사용하는 이유1. 불필요한 함수 재생성 방지 :React 컴포넌트는 상태(state)나 props가 변경될 때마다 재렌더링된다. 이때, 컴포넌트 내에서 정의된 함수들은 매번 새로 정의되기.. 2024. 12. 3. 이전 1 ··· 11 12 13 14 15 16 17 ··· 78 다음 728x90 반응형 LIST