728x90 300x250 SMALL 분류 전체보기1117 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. eslint-plugin-react-hooks 패키지 eslint-plugin-react-hooks 패키지는 React의 훅(Hooks) 사용을 올바르게 유지하고 버그를 예방하기 위해 ESLint 규칙을 제공하는 플러그인이다.이 패키지를 통해 useEffect, useMemo, useCallback등 React훅의 사용에서 발생할 수 있는 일반적인 문제를 잡아낼 수 있다. 주요 기능1. react-hooks / rules-of-hooks :목적 : 훅 사용 규칙 위반을 방지내용 : React의 훅은 특정 규칙에 따라 사용되어야 한다. 예를 들어, 훅은 함수 컴포넌트나 커스텀 훅에서만 사용할 수 있고, 조건문이나 반복문 안에서 사용해선 안 된다.예시 오류 :if (condition) { useEffect(() => { /* ... */ }); // 오류 발.. 2024. 12. 2. 이전 1 ··· 15 16 17 18 19 20 21 ··· 280 다음 728x90 반응형 LIST