목록React (28)

박주니 개발 정리

가져온 데이터를 엑셀 다운로드 하는 방법

설명 이유 관리자 페이지를 하면서 데이터를 리스트로 보여주고 있지만 문서로 확인해야하는 경우도 있습니다. 그래서 해당 데이터를 문서 요구사항에 맞게 셋팅해서 출력을 하면 직접 엑셀로 수작업 할 필요 없이 자동으로 되어 시간을 절약할 수 있습니다. 필요 조건 1. 엑셀 출력할 데이터 배열 2. exceljs 설치 및 연결 (import ExcelJS from "exceljs") 엑셀다운로드 버튼을 클릭했다는 가정하에 진행하겠습니다. 1. header에 들어갈 data를 셋팅합니다. const data = [ [ { value: "A", width: 10 }, { value: "B", width: 60 }, { value: "C", width: 20 }, ], ]; 2. header 이후에 들어갈 실제 데이..
react 2023. 9. 7. 19:26
react redux를 이용해서 pagination 활용

1. 먼저 redux 패키지를 설치합니다. npm install redux react-redux 참고 파일구조 2. store 폴더를 생성하고 index.js에 redux 스토어를 생성하고 애플리케이션에 redux를 통합합니다. // src/store/index.js import { createStore } from "redux"; import { combineReducers } from "redux"; import paginationReducer from "./reducers/paginationReducer"; // 리듀서를 복수로 관리하려면 combineReducers 함수를 사용하여 하나의 루트 리듀서로 결합합니다. const rootReducer = combineReducers({ paginati..
react/redux 2023. 6. 30. 16:19
react에서 datatable 사용 방법

1. npm install datatables.net-dt/css/jquery.dataTables.css datatables.net 를 합니다. 2. 업로드한 코드를 복사해서 이용합니다. 전체 코드 import React, { useEffect, useRef, useState } from "react"; import $ from "jquery"; import "datatables.net-dt/css/jquery.dataTables.css"; import "datatables.net"; import axios from "axios"; const MyDataTable = () => { const tableRef = useRef(null); const dataTableRef = useRef(null); con..
react 2023. 6. 28. 16:05
react에서 chartjs를 이용해서 bar chart 사용 방법

1. npm install chart.js를 합니다. 2. 제공하는 코드를 사용합니다. chartjs의 구성에 맞춰서 넣은 것이기 때문에 기본폼이라고 생각하고 복사해서 붙여놓으시면 됩니다. import React, { useEffect, useRef } from "react"; import { Chart, registerables } from "chart.js"; const BarChart = () => { const chartRef = useRef(null); let chartInstance = null; useEffect(() => { const ctx = chartRef.current.getContext("2d"); const createChart = () => { Chart.register(.....
react 2023. 6. 28. 15:31
이전 Prev 1 2 3 4 5 6 7 Next 다음