목록react (25)

박주니 개발 정리

react 중복된 항목 제거 group 방법

설명 이유 주로 풀스택으로 업무를 볼때에는 프론트에서 데이터를 바로 response해서 사용할 수 있게 백엔드에서 데이터를 셋팅해서 보내는데 이번에 타팀에서 만든 데이터를 가지고 중복된 값이 존재했을 때 이중포문으로 진행하면 되지만 관리하는 입장에서는 어떻게 접근해야할 지 생각하다가 filter을 이용후 group으로 접근했을 때 코드가 좀 더 간결해진다는 것을 알게되었습니다. 먼저 데이터가 key는 menu, sub-menu로 구성되어있고 menu가 중복되었을 때 중복을 제거하고 sub-menu가 속하게 만드는 것으로 접근을 해보겠습니다. const [asset, setAssetData] = useState([ { menu: "one", "sub-menu": "test1" }, { menu: "one"..
react 2023. 6. 30. 18:35
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 다음