728x90 개발일지64 Dynamic import를 사용해 동적으로 모듈 가져오기 Dynamic import란? import() 표현식으로 사용하며, 표현식은 모듈을 읽고 해당 모듈이 내보내는 것들을 모두 포함하는 객체를 담은 이행된 Promise를 반환한다. 호출은 어디서나 가능하다. Dynamic import를 사용하는 이유 1. 기존 import문은 정적인 방식으로, 정적으로 가져오는 경우 코드 로드 속도가 느려지고, 가져오는 코드가 필요할 가능성이 적거나 없을 가능성이 있다. 2. 정적으로 가져올 때 프로그램의 메모리 사용량이 크게 증가하고 가져오는 코드가 필요할 가능성이 낮다. 3. import문에 동적 매개변수를 사용할 수 없다. ※ 즉, 동적으로 import하는 것은 성능 향상과 필요한 경우에 맞춰 사용하는 것에 용이하다. 사용법 필요한 함수들을 정의하고, 필요한 곳에서 .. 2023. 3. 18. 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. 이전 1 2 3 4 5 6 7 8 ··· 16 다음 728x90
