728x90 300x250 SMALL 분류 전체보기1120 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. useMemo()의 의존성 배열과 create 함수 useMemo()훅은 의존성 배열에 변수가 변했을 경우에만 create 함수를 호출해서 결과값을 반환한다고 했다. https://moo-you.tistory.com/1072 useMemo : 리액트 훅 사용법useMemo훅은 React에서 컴포넌트의 성능을 최적화하기 위해 사용되는 훅이다.특정 연산의 결과를 메모이제이션하여 불필요한 재계산을 방지한다. 의존성배열에 변수가 변했을 경우에만 create함수moo-you.tistory.com 여기서 create 함수란 React훅 안에서 값을 계산하거나 반환하는 함수를 가리킨다. 다시 말해 useMemo()나 useEffect()안에 정의된 연산을 수행하는 함수를 의미한다. const memoizedValue = useMemo(() => { // 여기서 "e.. 2024. 12. 1. 이전 1 ··· 16 17 18 19 20 21 22 ··· 280 다음 728x90 반응형 LIST