React 에서 PDF url 또는 blob 을 프린터하는 기능을 구현해 본다. 예제 iframe 을 활용하여 프린터 기능을 간단하게 사용할 수 있다. import React from 'react'; import { Button } from 'antd'; const ExamplePrintPDF = () => { const printPdf...

이벤트 리스너를 통해 함수 호출 시 너무 잦은 호출이 발생하여 성능을 저하시킬 수 있다. lodash 의 debounce 를 이용해서 설정한 시간 안에 한번만 호출 되도록 해본다. debounce ? 이벤트를 그룹화하여 지정한 시간이 지난 후 하나의 이벤트만 발생하도록 처리하는 기술이다. 활용 예제 import React, { useEffect, ...

Memoization 이란? 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 적절한 곳에 사용하면 불필요한 렌더링을 줄여 준다. 하지만 Memoization 의 무분별한 사용은 메모리 사용이 많아 지므로 적절한 곳에 사용이 필요하다. Memoization - Wiki ...

props 에 callback 함수를 넣어서 호출 받을 수 있다. Parent const Parent = () => { const handleItemChanged = (action, item) => { console.log(action, item); } return ( <Child onItemChanged...

useImperativeHandle 을 이용하여 부모 컴포넌트에서 자식 컴포넌트의 함수를 호출 할 수 있다. Hooks API - React Parent import React, { useEffect, useState, useRef } from 'react'; const Parent = () => { const childRef = ...

React의 @reach/router 모듈을 활용하여 화면 이동 및 데이터 전달을 해본다. Link 활용 import { Link } from '@reach/router'; <Link to="/test" state= { { info: 'hello' } }>MOVE</Link> navigatge 활용 import { nav...

react 컴포넌트를 npm module로 배포시 tailwind CSS 코드는 일반 CSS로 컴파일해줘야 인식이 된다. 해결 방법 package.json 에 tailwind CSS 를 빌드하는 명령어를 추가해준다. "scripts": { "start": "craco start", "build": "craco build", ...

Tailwind CSS? Utility-First 컨셉을 가진 CSS 프레임워크 중 하나로 각 속성들을 클래스에 직관적으로 표현할 수 있다. <div class="text-bold text-white">TEST</div> 설치하기 Tailwind CSS 설치 yarn add tailwindcss@npm:@tailw...

React 컴포넌트를 npm 모듈로 배포하여 사용해 본다. 신규 프로젝트 생성 React 모듈 개발을 위한 React 프로젝트를 생성한다. npx create-react-app [new project name] React 빌드를 위한 모듈을 설치 yarn add -D @babel/cli @babel/preset-react src/lib 폴더 ...

Create-React-App 을 이용하여 프로젝트 생성해 본다. CRA(Create-React-App) ? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 자동으로 세팅 해주는 도구이다. 프로젝트 생성 npx create-react-app [new project name] 모듈 설치 yarn 실행 yarn start