React/유용한 NPM6

• 

  [React]React에서 Sass 사용 이번 포스팅에서는 React 프로젝트에서 Sass를 사용하는 방법에 대해 설명합니다. 목차 Sass 개념 React 프로젝트에서 Sass 사용하는 방법 Sass 개념 Sass는 Syntactically Awesome Stylesheet의 약자로 아래 특징을 가지는 CSS 전처리기입니다. 중첩 규칙 변수 정의 인라인 mixins 함수 사용 간단하게 작성된 CSS는 문제가 없지만, 방대하고 복잡하게 구현된 CSS는 한눈에 이해하기 어려우며 가독성이 저하되기 때문에 유지보수가 어렵습니다. 하지만, Sass를 사용하면 복잡한 코드를 재사용 가능하고 좀 더 심플하게 작성할 수 있습니다. Sass는 전처리기이기 때문에 직접 동작시킬 수 없으며, 웹에서 실행되지 않습니다. Sass가 웹에서 동작하는 원리는 node-.. React/유용한 NPM 2021. 11. 2.

• 

  [React]조건문 작성 방법 이번 포스팅에서는 JSX에서 조건문을 좀 더 깔끔하게 작성할 수 있도록 지원하는 패키지를 소개합니다. 목차 지저분한 JSX의 조건문 jsx-control-statements 사용 지저분한 JSX의 조건문 많은 개발자들은 조건문을 작성하기 위해 if~else문 또는 switch문에 익숙하며, 조건문이 시작되고 있음을 한눈에 파악할 수 있습니다. 하지만, JSX에서 조건문을 작성하기 위해 사용되는 삼항 연산자는 코드를 지저분하게 만들며 가독성이 떨어지는 단점이 존재합니다. 다음과 같이 간단한 로직이 존재합니다. if (isLoading) { // loading... } else { if (isMain) { // title, category 처리... } // main... } isLoading이 true이면.. React/유용한 NPM 2021. 11. 2.

• 

  [React]Recoil 간단한 예제 코드 Recoil 라이브러리의 필요성 지난 포스팅에서는 자식 컴포넌트가 부모 컴포넌트의 state를 변경하는 방법에 대해 알아보았습니다. 그리고 부모 컴포넌트의 state가 변경되면서 부모 컴포넌트에 속하는 모든 자식 컴포넌트들이 re-render 되는 것도 알게 되었습니다. Recoil 라이브러리는 모든 자식 컴포넌트들이 re-render 되는 것을 방지하기 위해 탄생한 상태 관리 라이브러리입니다. 부모 컴포넌트의 state를 공유하지 않고 Atoms이라는 저장소에 상태를 관리합니다. 컴포넌트들은 Atoms에 접근하여 상태를 공유하기 때문에 상태를 공유하기 위해서 더 이상 부모 컴포넌트의 state에 의존하지 않아도 됩니다. Recoil 라이브러리의 자세한 내용 및 사용 방법은 아래 공식 문서를 참고 부탁드.. React/유용한 NPM 2021. 7. 25.

• 

  [React]csv 파일로 다운로드 React에서 csv파일로 추출 가능한 Package를 소개합니다. 다운로드 수가 많은 Package부터 작성합니다. react-csv data를 csv파일로 생성합니다. data는 array의 array, object의 array 또는 문자열이 될 수 있습니다. 공식 사이트 : https://www.npmjs.com/package/react-csv 설치 npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; 코드 ※ CodePen에서 react-csv Package가 정상적으로 설치되지 않아서 코드 블록으로 작성하였습니다. headers = [ { label: "First Name", key: "firs.. React/유용한 NPM 2021. 7. 13.

• 

  [React]현재 브라우저 정보 확인하기 React에서 Browser 정보를 확인할 수 있는 Package를 소개합니다. React-browser-detection 사용 브라우저를 체크 하기 위한 용도는 아니며, 현재 실행되고 있는 브라우저에 따라서 값을 return 합니다. IE 버전별로 처리해야 하는 경우에는 사용 불가능합니다. 공식 사이트 : https://www.npmjs.com/package/react-browser-detection 설치 npm install --save react-browser-detection Import import BrowserDetection from 'react-browser-detection'; 코드 See the Pen React-browser-detection_EX by JaeSung2386 (@jae.. React/유용한 NPM 2021. 7. 13.

• 

  [React]table Element를 엑셀 파일로 다운로드 React에서 table Element를 엑셀 파일로 다운로드하는 방법에 대해 설명합니다. react-html-table-to-excel 사용 공식 사이트 : https://www.npmjs.com/package/react-html-table-to-excel 특징 HTML ...을 .xls 형식의 Excel 파일로 다운로드 IE 11 지원 설치 npm install --save react-html-table-to-excel Import import ReactHTMLTableToExcel from 'react-html-table-to-excel'; 코드 See the Pen TableToExcel by JaeSung2386 (@jaesung2386) on CodePen. 다운로드한 엑셀 파일 react-h.. React/유용한 NPM 2021. 7. 12.