React - Project 진행일지 2

도넛차트를 써야해서 해당 라이브러리를 찾아서 세팅

 

import React from 'react';

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

import { Doughnut } from 'react-chartjs-2';

ChartJS.register(ArcElement, Tooltip, Legend);

export const data = {

  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],

  datasets: [

    {

      label: 'Value',

      data: [12, 19, 3, 5, 2, 3],

      backgroundColor: [

        'rgba(255, 99, 132, 0.2)',

        'rgba(54, 162, 235, 0.2)',

        'rgba(255, 206, 86, 0.2)',

        'rgba(75, 192, 192, 0.2)',

        'rgba(153, 102, 255, 0.2)',

        'rgba(255, 159, 64, 0.2)',

      ],

      borderColor: [

        'rgba(255, 99, 132, 1)',

        'rgba(54, 162, 235, 1)',

        'rgba(255, 206, 86, 1)',

        'rgba(75, 192, 192, 1)',

        'rgba(153, 102, 255, 1)',

        'rgba(255, 159, 64, 1)',

      ],

      borderWidth: 1,

    },

  ],

};

export function Donut() {

  return <Doughnut data={data} />;

}

 

해당차트에서 사용하는 chart.js 를 설치

npm install chart.js

npm install react-chartjs-2

 

 

해당방식으로 작성하였을 때 

profile.jsx:6 Uncaught SyntaxError: The requested module '/src/components/doughnut.jsx?t=1700454520810' does not provide an export named 'default' (at profile.jsx:6:8)

에러가 발생하였다..

 

-->> 해결방법

export function Donut() {

  return <Doughnut data={data} />;

 

}

 

이 부분을

 

const DoughnutComponent = () => {

  return <Doughnut data={data} />;

};

export default DoughnutComponent;

이렇게 바꾸어 해결하였다.

 

 

그래프의 크기를 조절하기 위해서

const options = {

  maintainAspectRatio: false,

  width: 1000,

  height: 400,

};

const DoughnutComponent = () => {

  return <Doughnut data={data}  options={options} />;

};

해당 방식으로 width와 height의 값을 조절하여주었다.

 

 

  legend: {

    position: 'bottom', // 라벨 위치 설정

  },

이후 라벨의 위치가 기본으로 위에 출력이되어 아래로 변경하기 위해서

options 에 legend를 사용하여 위치를 잡아주었다.

 

 

라인 차트를 그리기위해서 추가적으로 설치

npm install faker

 

--> 해당 faker.js를 설치하는과정에서 오류가 발생하여 사용하지않음,

 

 

  const fetchData = () => {

    axios.get('https://jsonplaceholder.typicode.com/posts')

      .then(res => {

        setData(res.data)

        calculateTotalPages(res.data.length);

        console.log(res);

        console.log(res.data);

      })

  }

faker.js 대신에 더미데이터로 json파일을 제공해주는 url을 사용해서 axios 구현

 

 

뉴스 페이징을 위해서 react-js-pagination 사용하였다.

npm install react-js-pagination

https://www.npmjs.com/package/react-js-pagination

react-js-pagination

해당사이트를 통해 속성값 확인가능

 

 

 

import React, { useEffect, useState } from "react";

import Pagination from "react-js-pagination";

import styled from "styled-components";

const MypagePaging = () => {

  const [data, setData] = useState([]);

  const [page, setPage] = useState(1);

  const [items, setItems] = useState(10);

  const [totalPages, setTotalPages] = useState(1);

  const fetchData = () => {

    axios.get('https://jsonplaceholder.typicode.com/posts')

      .then(res => {

        setData(res.data)

        calculateTotalPages(res.data.length);

        console.log(res);

        console.log(res.data);

      })

  }

  const handlePageChange = (page) => { setPage(page); };

  const itemChange = (e) => {

    setItems(Number(e.target.value))

    calculateTotalPages(data.length);

  }

  const calculateTotalPages = (totalItems) => {

    const totalPages = Math.ceil(totalItems / items);

    setTotalPages(totalPages);

  }

 

  useEffect(() => {

    fetchData();

  }, []);

 

  console.log(items*(page-1), items*(page-1)+items)

 

  return (

    <div>

      {data.slice(

        items*(page-1),

        items*(page-1)+items

      ).map((v,i) => {

        return (

          <div key={i}>

            <h3>{v.title}</h3>

            <div>userId = {v.userId}, id = {v.id}</div>

            <div>{v.body}</div>

          </div>

        )

      })}

      <PaginationBox>

        <Pagination

          activePage={page}

          itemsCountPerPage={items}

          totalItemsCount={data.length-1}

          pageRangeDisplayed={5}

          onChange={handlePageChange}>

        </Pagination>

      </PaginationBox>

    </div>

  )

}

const PaginationBox = styled.div`

  .pagination { display: flex; justify-content: center; margin-top: 25px;}

  ul { list-style: none; padding: 0; }

  ul.pagination li {

    display: inline-block;

    width: 40px;

    height: 40px;

    border: 1px solid #e2e2e2;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1rem;

  }

  ul.pagination li:first-child{ border-radius: 5px 0 0 5px; }

  ul.pagination li:last-child{ border-radius: 0 5px 5px 0; }

  ul.pagination li a { text-decoration: none; color: #F0BE4D; font-size: 1rem; }

  ul.pagination li.active a { color: white; }

  ul.pagination li.active { background-color: #F0BE4D; }

  ul.pagination li:hover,

  ul.pagination li a:hover,

  ul.pagination li a.active { color: black; }

`

export default MypagePaging

 

slice를 통해서 데이터를 나누어 글을 하나씩 작성하였고,

styled를 통해서 css설정을 진행하였다.