IT V-log

Version React 18.2.0 , Typescript 4.9.5 , Sass 7.0.1 사용법 import React from 'react'; import { useState } from 'react'; const Pagination = () => { // 페이지당 보여줄 게시물 수 const MaximumContentItems = 10; // DB에서 가져오는 게시물 data const [posts, setPosts] = useState(DummyRankingData); // 페이지 초기설정 const [page, setPage] = useState(1); // /** * 게시물의 위치 구하는 공식 = 현재 페이지 번호 * 페이지당 보여줄 게시물 수 * 현재 페이지 번호를 기준으로 표시해줘야할 ..

Version React 18.2.0 , Typescript 4.9.5 , Chart.js 4.4.0 설치 npm install react-chartjs-2 chart.js yarn add react-chartjs-2 chart.js 사용법 import React from 'react'; import {Chart, ArcElement, Tooltip, Legend} from 'chart.js' import { Doughnut } from 'react-chartjs-2'; // chart.js // https://www.chartjs.org/docs/latest/configuration/legend.html const DoughnutChart = () => { // chart data 1 const cha..

AOS Install npm install --save aos@next 또는 yarn add aos@next AOS 타입스크립트 Install npm i --save-dev @types/aos 또는 yarn add --save-dev @types/aos 타입스크립트는 AOS, types 둘다 설치 해야 됩니다. 사용 할 컴포넌트에 AOS import import React, { useEffect } from 'react'; import 'aos/dist/aos.css'; import './App.css'; && JSX useEffect(() => { AOS.init(); }, []) 남은 사용법은 AOS 공식 페이지에서 확인 후 사용하시면 됩니다! https://michalsnik.github.io/ao..

설치 npm install react-csv --save; yarn add react-csv 사용법 import { CSVLink, CSVDownload } from "react-csv"; const csvData = [ ["firstname", "lastname", "email"], ["Ahmed", "Tomi", "ah@smthing.co.com"], ["Raed", "Labes", "rl@smthing.co.com"], ["Yezzi", "Min l3b", "ymin@cocococo.com"] ]; Download me; // or ; CSVLink는 엑셀 파일을 다운로드 할 수 있는 링크 입니다. 해당 링크를 클릭했을 때에만 csv 파일을 다운받을 수 있으며, CSVLink 대신 button 태그..

리액트가 실행이 되면 JSX 파일 및 함수가 전부 읽혀지고 화면에 렌더링 해주는 방식이라 렌더링 된 후에 데이터가 변경되거나 화면이 변경되면 리액트는 그걸 인지하지 못 합니다. 그래서 리액트에 다시 알려줘야 하는데 그러기 위해 사용하는 것이 state 입니다. State 사용법 const [name(현재상태 값), setName(값을 변경해주는 함수)] = useState(props.name(초기값을 할당하는 곳)); state 값 변경하는 방법 위에서 설명했듯이 state 값은 setState 함수를 이용하여야 합니다. setState 함수를 이용하여 값을 변경해야지만 react가 state 값이 변경되었다는 것을 인식하여 화면을 렌더링 하기 때문 입니다. state 변경 시 값 주의점 예를들어 set..

컴포넌트가 렌더링이 될때마다 수행하게 되는 리액트 훅 으로 Side-effect를 처리하기 위해 사용합니다. Side-Effect(부작용) 란? 기대했던 효과 외에 나타나는 다른 작용을 말하며, 부작용은 흔히 유해하다고 생각하는 분들이 많지만 항상 나쁜 방향으로만 일어나는 것은 아닙니다. 그 예로 고혈압 치료제 성분 중 하나인 미녹시딜이 현재는 탈모치료에도 사용되는 것 처럼 말이죠 하지만 React에서 side-effect는 조금 다른 의미를 가지고 있으며, 부정적으로 생각하고 있습니다. React에서 side-effect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 Side-Effect(부작용)라고 합니다. 예를들면 함수의 전역변수 값을 변경하거나 혹은 함수 외부에 존..

useState의 대체 함수로 useState처럼 state를 관리를 도와주는 리액트 훅 입니다. 그래서 useState와 약간 비슷합니다. 하지만 useState보다 더 많은 기능이 있고 더 복잡한 state에 유용합니다. 예를 들면 여러 state들이 함께 속해 있는 경우가 있습니다. 같은 것을 관리하는데 관리하는 측면이 다를 뿐인거죠 혹은 여러 state가 같이 바뀌거나 서로 관련된 경우가 있습니다. 그런 경우에는 useState나 거기에서 얻은 state는 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽습니다. 이런 경우 useReducer를 useState 대신 쓸 수 있습니다. 하지만 그렇다고 해서 항상 useReducer를 사용해야 한다는 건 아닙니다. 더 강력하다고 해서 항상 더 좋다..

render 메서드에서 생성된 Dom 노드나 리액트 Element 요소에 접근하여 그것들을 직접작업 할 수 있게 해주는 것입니다. 예를들면 Dom API를 이용하는 document.getElementsById("button"); 로 해당하는 Dom에 직접적으로 접근하는 방법을 이야기 합니다. ref는 언제 사용해야 하나? 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. 애니메이션을 직접적으로 실행시킬 때. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. 리액트 공식문서에서는 아래와 같은 사례를 구체적인 예시로 들고 있습니다. 하지만 이번에 ref를 사용할 예제는 위와는 다른 예제 입니다. 사용자에게 입력값을 받을때 input 태그를 이용하게 되는데 이때 useState를 사용하여..

부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법 입니다. 위의 내용만 봐서는 문득 Portal을 사용하는 이유에 대해 감히 잡히지 않으실거 같습니다. 그래서 제가 예시를 가져왔습니다! 위 사진에서 중점적으로 봐야 할 것은 바로 Modal 입니다! 사진에 보이듯 오버레이가 다른 HTML 코드 안에 중첩되어 있다면 기술적으로 좋은 코드나 구조가 아닙니다. (*Overlay: 어떠한 HTML 요소 위에 또 다른 HTML 요소가 겹치게 보이는 효과 / 모달창, 사이드 드로어, 다이얼로그 등) 또한, 추후에 스크린 리더가 렌더링 되는 HTML 해석할 때 일반적인 오버레이라고 인식하지 못 할 수도 있습니다. 이러한 문제를 해결하기 위해서는 아래의 사진처럼 오버레이가 다른 태그가 ..

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환 합니다. 리액트를 사용하기 위한 문법인 JSX를 사용할 때 return 문안에는 반드시 하나의 최상위 태그가 있어야 합니다. 이는 ReactDom.createRoot(document.getElementById('root'))에서 하나의 루트 요소만 가지고 있기 때문입니다. index.js 파일 만일 이러한 내용을 어기고 두개 이상의 최상위 태그가 생기면 아래와 같은 에러가 발생하게 됩니다. 그런데 이러한 문제를 해결하기 위해 단순히 감싸는 용도로 div 태그를 사용하게 되면 추후에 앱이 느려지는 이유 중 하나가 될 수 있습니다. 처음에는 그 양이 적어 괜찮겠지만 앱이 점점 커지면서 문제가 되기 때문에 처음부터 이런 감점 요소를 잡고 가는 게 좋다..