Routing 리액트 라우터를 사용하여 페이지를 생성하는 것과 달리 Gatsby는 src/pages 안에 각 .tsx 파일에 대한 페이지를 생성합니다. 예를 들어 src/pages/contact.tsx는 yoursite.com/contact 페이지를 생성하고 src/pages/home.tsx는 yoursite.com/home 페이지를 생성합니다. Gatsby로 Routing 하는 것은 간단하고 리액트 라우터도, 스크린도 만들 필요 없고 그 경로와 요소들을 일일이 설명할 필요도 없다는 장점이 있습니다. // src/pages/index.tsx import React from 'react'; export default function Index() { return Hello world; } 참고 https:..

Framer Motion을 사용하여 애니메이션을 간편하고 쉽게 만드는 방법을 알아보겠습니다. Framer Motion Framer는 디자이너들을 위해 프로토타입 등을 만들어 주는 회사입니다. Framer Motion은 React 용 production-ready 모션 라이브러리입니다. 설치 $ npm install framer-motion 사용 Animation Framer Motion의 애니메이션은 모션 컴포넌트의 유연한 animate 속성을 통해 제어됩니다. 간단한 애니메이션의 경우 animate props에서 직접 값을 설정할 수 있습니다. motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} initial initial: boolea..

reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. import { useRef } from 'react'; function RefEx() { const inputRef = useRef(null); const onClick = () => { inputRef.current?.focus(); // 5초 뒤에 focus 사라짐 setTimeout(() => { inputRef.current?.blur; }, 5000); }; return ( cli..

React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. import React from 'react'; function MyComponent(props) { /* props를 사용하여 렌더링 */ } export default React.memo(MyComponent, areEqual); 사용 이전 포스트 [React] Drag and Drop에서 드래그, 드롭 시 바뀐 부분이 아닌 전체가 리랜더링이 되어 텍스트의 흔들림이 가끔..

react-beautiful-dnd을 사용하여 React에서 깔끔하고 사용하기 쉬운 드래그, 드롭, 애니메이션을 적용할 수 있는 방법에 대해 알아보겠습니다. 설치 $ npm i react-beautiful-dnd TypeScript 사용 시 추가로 설치합니다. $ npm i --save-dev @types/react-beautiful-dnd 사용 임시 데이터 ['a', 'b', 'c', 'd', 'e', 'f']를 사용하여 카드 형태의 드래그, 드롭을 구현해 봤습니다. // atoms.tsx import { atom } from 'recoil'; export const toDoState = atom({ key: 'toDo', default: ['a', 'b', 'c', 'd', 'e', 'f'], });..

React에서 React Hook Form 사용 방법에 대해 알아보겠습니다. 기본적으로 Form을 사용할 때 작성하는 코드입니다. 하나의 input이지만 여러 개의 input을 사용할 경우 useState와 onChange 이벤트가 많이 생성됩니다. 그리고 Validation Check 하는 코드도 복잡해집니다. // InputForm.tsx import React, { useState } from 'react'; function InputForm() { const [toDo, setTodo] = useState(''); const [toDoError, setTodoError] = useState(''); const onChange = (event: React.FormEvent) => { const { ..

Recoil 사용 방법에 대해 알아보겠습니다. Recoil Recoil는 페이스북에서 만든 React를 위한 상태 관리 라이브러리입니다. Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다. 설치 Recoil 패키지는 npm에 존재합니다. 안정한 최신 버전을 설치하기 위해서는 아래의 명령어를 실행하면 됩니다. $ npm install recoil 또는 yarn을 사용한다면 이 명령어를 사용하면 됩니다. $ yarn add recoil RecoilRoot 루트에 RecoilRoot를 감싸줍니다. // index.tsx import { RecoilRoot } from 'recoil'; imp..

ApexCharts는 데이터를 시각화해주는 차트 라이브러리입니다. 무료로 사용할 수 있고, Js, Angular, React, Vue를 지원합니다. ApexCharts를 사용하여 React.js 에서 간단하게 차트 만드는 방법에 대해 알아보겠습니다. 설치 apexcharts 와 react-apexcharts 라이브러리를 같이 설치합니다. $ npm install --save react-apexcharts apexcharts 사용 코인 정보를 조회하여 차트를 구성하였습니다. Line Chart를 예제로 사용하였습니다. // api.ts const BASE_URL = `https://api.coinpaprika.com/v1`; // 코인 정보 조회 export function fetchCoinHistory(..

React Query는 데이터 Fetching, 캐싱, 동기화, 업데이트, 에러핸들링 등 비동기 과정을 쉽게 만들어 주는 React 라이브러리입니다. React Query를 사용하면 기존의 서버 데이터를 가져오거나 업데이트하는 코드를 축약할 수 있고 캐싱 처리가 간단해졌습니다. 간단하게 useQuery를 사용하여 코인들의 정보를 조회하는 코드를 통해 React Query 사용 전 후를 비교하였었습니다. 설치 $ npm i react-query or $ yarn add react-query useQuery 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 포함)와 함께 사용할 수 있습니다. 첫 번째 파라미터는 unique Key이고, 두 번째는 비동기 함수(api호출 함수..

Nested Routes는 route 안에 있는 또 다른 route입니다. React Router 가 v6로 바뀌면서 Nested Routes 만 아니라 Route 사용하는 방법이 바뀌었습니다. 전 5 버전과 현재 6 버전 사용법을 비교하였습니다. React Router v5 nested routes를 구현하는 방법은 자식 route를 부모 route의 element 내부에 작성하는 것입니다. // Router.tsx import { BrowserRouter, Switch, Route } from 'react-router-dom'; import Coin from './routes/Coin'; import Coins from './routes/Coins'; function Router() { return ..