React12 무분별한 useMemo 사용 멈춰! 무분별한 최적화는 코드를 이해하기 어렵게 만듭니다. 코드 컨벤션으로 useMemo, useCallabck 사용을 지향하기도 하지만 memoization 비용도 고려해야합니다. useMemo의 목적 useMemo는 계산된 결과를 캐싱합니다. 컴포넌트가 re-render될 때 useMemo의 depency list가 바뀌지 않았다면 캐싱된 값을 그대로 사용합니다. 하지만, 오직 최적화를 위해서만 사용하지는 않습니다. React.memo, useCallback, debouncing, concurrent rendering 등과도 연관되어 있습니다. 어떤 경우에는 의도적으로 useMemo를 사용하는 것이 아닌 최적화가 되겠지라는 무작위성에 기대 모든 곳에 useMemo를 사용하기도 합니다. 이러한 무분별한 use.. 2023. 9. 19. TS에서 ForwardedRef 사용하기 간혹 컴포넌트에서 사용하는 ref를 외부에 노출시켜야 하는 경우가 있다. 이런 경우 다음과 같이 사용할 수 있다. interface ITestComponentProps { name: string; } const TestComponent = forwardRef(function TestComponent(props: ITestComponentProps, ref: ForwardedRef) { return ( {props.name} ) }) export default TestComponent 하지만 ref를 제공하는 컴포넌트에서 해당 ref를 사용한 로직을 작성하려고 할 때 타입에러가 발생할 수 있다. interface ITestComponentProps { name: string; } const TestComp.. 2023. 7. 30. React에서 exceljs 사용하기 및 엑셀 내보내기(다운로드) 에러 해결 필수 library npm i exceljs npm i file-saver exceljs에서는 아쉽게도 client쪽에서 엑셀 다운로드가 지원되지 않는다고 합니다. 따라서 file-saver라는 library를 이용하여 다운로드 합니다. 예제 코드 입니다. import React from "react"; import * as ExcelJS from "exceljs"; import { saveAs } from "file-saver"; export default function Excel() { const handleExcel = async () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet("My S.. 2021. 3. 31. React에서 TypeScript 사용하기 - Redux Middleware(Thunk, Saga) 비동기 작업을 처리할 때 주로 redux middleware를 사용하게 됩니다. 이때 주로 사용하는 library는 redux-thunk와 redux-saga입니다. 그래서 이번 글에서는 두 개의 library를 TS로 어떻게 사용하면 될지 소개합니다. Tip. 비동기 요청을 통해 가져오는 데이터의 경우 직접 타입을 하나 하나 정해주기 어려운 경우가 있습니다. 그럴 때 데이터를 넣어주면 자동으로 타입으로 변환해주는 서비스를 이용하면 편하게 타입을 만들 수 있습니다. ex. { "id": 1, "text": "this is text", "done": false } => export interface Todo{ id: number; text: string; done: boolean; } quicktype.i.. 2020. 10. 28. 이전 1 2 3 다음
