STUDY/React (52) 썸네일형 리스트형 React | react-chartjs-2 ticks 설정 react-chartjs-2를 사용하는데, options 설정이 제대로 안 돼서 서칭한 결과를 기록 겸 공유 한다. 설정하는 방법은 Linear Scale - Step Size을 참고한다. ticks: {stepSize: 10}을 설정해 단위가 10으로 고정되도록 설정한다. import { Bar } from 'react-chartjs-2'; import { Chart as ChartJS, registerables } from 'chart.js'; ChartJS.register(...registerables); const options = { scales: { y: { min: 0, max: 100, ticks: { stepSize: 10, }, }, }, }; 위 설정만으로 안 될 경우 maintain.. React | 브라우저 뒤로가기 버튼 감지 react-router-dom으로 브라우저의 뒤로가기 버튼 클릭을 감지할 수 있다. history.listen을 이용하는 방법인데, location이 변경될 때 마다 실행되는 콜백 함수다. const history = useHistory(); useEffect(() => { let unlisten = history.listen((location) => { if (history.action === 'PUSH') { } if (history.action === 'POP') { } }); return () => { unlisten(); }; }, [history]); GitHub - remix-run/history: Manage session history with JavaScript Manage sessio.. React | 파일 다운로드 참고 https://gist.github.com/javilobo8/097c30a233786be52070986d8cdb1743 Spring Boot로 만든 API에서 엑셀 파일을 다운로드 해보자.. axios {responseType: 'blob'}설정을 해준다. 이러함.. apiClient는 axios.create()으로 만든 모듈?이다. const res = await apiClient.get(url, { responseType: 'blob', }); return res;download useAsync를 사용해서 state값이 성공이면.. data 상태값이 변경되게 된다. 그래서 useEffect()로 처리했다. 혹시몰라 컴포넌트가 언마운트되면 해당 링크도 삭제하게 만들었다.. React | 반응형 테이블을 만들어보자.. 테이블처럼 보이지만 은 사용하지 않는다.. 결과물 데스크탑에서는 이렇게 보이고, 모바일에서는 이렇게 되도록 만들거다. 원하는 거.. 제목 셀은 항상 존재하고 제목 셀의 넓이는 항상 일정하다. 모바일에서는 제목, 내용 한 쌍이 무조건 한 열을 다 차지한다. 한 열에 두 개 혹은 네 개의 셀이 들어갈 수 있다. 컴포넌트 만들기.. Table: 테이블 전체를 감싸는 div TableRow: 한 열을 감싸는 div TableCell: 제목 + 내용으로 이루어진 한 쌍 일단 styled-components를 사용하기 떄문에 스타일을 정의할 파일을 하나 생성한다. // Table.styled.js import styled from 'styled-components'; export const Style.. React | API 요청 테스트 testing-library 리액트에서도 권장하고 있는 테스팅 라이브러리. create-react-app으로 생성한 프로젝트는 기본적으로 포함하고 있다. axios-mock-adapter axios요청을 mock, 즉 가짜로 한다. npm install axios-mock-adapter --save-dev사용 기본 사용법 new MockAdaptor(axios)를 통해 axios의 요청을 mocking한다. 실제 서버까지 요청이 전달되지 않고, mocking한 요청과 동일한 요청이 있다면 .reply(~)로 설정한 가짜 응답 값이 돌아온다. import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; con.. React | API 요청을 분리해보기.. axios axios 설치 npm install axios /src경로에 api폴더를 생성하고, 공통으로 사용할 axios를 내보낸다. export apiClient로 바로 내보내도 된다. api요청 도메인 같은 값은 환경변수로 관리하는 것이 좋다. create-react-app으로 생성한 프로젝트는 .env파일로 관리 가능하다. // /src/api/index.js import axios from 'axios'; const apiClient = axios.create({ baseURL: process.env.REACT_APP_BASE_URL; // 환경변수로 지정한 BASE_URL을 사용 }); // interceptor처리도 작성한다. //export apiClient; const { .. React | custom hook (useAsync 훅 만들기) Custom Hook? 리액트가 제공하는 hooks를 이용해 커스텀 훅을 만들 수 있다 커스텀 훅은 로직을 재사용 할 수 있다 커스텀 훅의 이름은 리액트 내장 훅처럼 use로 시작하는 것이 좋다 A custom Hook is a JavaScript function whose name starts with use and that may call other Hooks. 출처: https://reactjs.org/docs/hooks-custom.html useAsync hook 많이들 만들어 사용하는 커스텀 훅 중에 하나인 useAsync 훅을 만들어본다 API 요청에 유용하게 사용된다! 일단 useReducer와 useEffect, useCallback을 import 한다. import { useReduce.. React | 서브라우트 Nested Route 레이아웃을 유지하는건 다루지 않음.. (사실 저것도 서브라우트다..) react-router-dom install 타입스크립트를 사용할 경우에는 타입 정보가 들어있는 @types가 붙은 패키지도 다운로드 해야 함 $ npm install react-router-dom @types/react-router-dom 라우트 설정 src경로에 routes폴더를 생성하고, index.tsx파일을 생성한다. 이 파일이 App.tsx(App.js/App.jsx)를 대신해 루트 역할을 할 것이다. (컴포넌트에는 그냥 H1태그로 글씨만 나타나도록 구성했으므로 생략) // src/routes/index.tsx import React from 'react'; import { BrowserRouter, Route, Switch.. 이전 1 2 3 4 ··· 7 다음
