728x90 개발일지/React24 React useCallback을 이용해 함수 재사용하기 useCallback이란? 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 함수 메모이제이션용 React hook이다. const memoFn = useCallback(()=>{},[dep]) 첫번째 인자의 함수를 두번째 인자의 종속성 배열 내의 값이 변경될 때까지 저장하여 재사용할 수 있도록 해준다. javascript에서 함수(function () {} or () => {})는 객체 리터럴( {...} )이 항상 새 객체를 생성하는 것과 유사하게 항상 다른 함수를 생성한다. 그렇다면 함수를 props 로 내려준다고 하면 하위 컴포넌트는 props가 변경되었다고 인식하게 된다. 그렇다면 React.memo를 이용한 최적화가 원하는대로 작동하지 않을 수 있기 때문에 이러한 점을 useCallba.. 2023. 3. 16. React useMemo 사용하기 useMemo란? useMemo는 React.memo()와 useCallback과 같이 컴포넌트를 최적화하기 위한 훅 중 하나다. useMemo를 사용하는 이유 React의 컴포넌트는 부모 컴포넌트가 렌더링되거나, 자신의 state 변경, 상위 컴포넌트에서 내려받는 props가 변경될 때마다 다시 렌더링된다. 그런데 내려받는 props나 state가 여러가지일때 한 개 props의 변경으로 모든 값이 다시 계산되는 경우 불필요한 비용이 누적되게 된다. useMemo는 이런 현상을 효율적으로 전환하기 위한 hook이다. useMemo를 적용하기 전 // 상위 컴포넌트 import { useState } from "react"; import { UseMemoChildren } from "./UseMemoCh.. 2023. 3. 16. React.memo 사용하기 유저에게 UI를 빠르게 제공하기 위해서는 컴포넌트의 렌더링을 최소화해 성능을 향상시킬 필요가 있다. 이를 위해 React.memo에 대한 간단한 사용법을 기록해본다. 1. React.memo() 컴포넌트가 React.memo()로 래핑될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 Memoizing된 내용을 재사용한다. React.memo() 사용법 import React from "react"; export const MemoTest = ({ someProps }) => { console.log("Memo test, props 바뀔때만 콘솔 작동"); return ( MemoTest 컴포넌트 props가 바뀔때만.. 2023. 3. 16. ContextAPI 사용해보기 간단한 데이터의 변화를 props 드릴링 없이 전역적으로 관리해주기 위해 ContextAPI를 사용해볼 수 있다. useContext사용법 1. context component 생성 // context.jsx import { createContext, useContext, useState } from "react"; // context 생성 const AnyContextValue = createContext(); const AnyContextUpdate = createContext(); // useContext 생성 export const useContextValue = () => { const context = useContext(AnyContextValue); return context; }; exp.. 2023. 3. 16. 이전 1 2 3 4 5 6 다음 728x90
