React에서 memo 사용 방법에 대해 알아보겠습니다. 컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다. 즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다. 1234567imp
react-beautiful-dnd을 사용하여 React에서 깔끔하고 사용하기 쉬운 드래그, 드롭, 애니메이션을 적용하는 방법에 대해 알아보겠습니다. 설치 1$ npm i react-beautiful-dnd TypeScript 사용 시 추가로 설치합니다. 1$ npm i --save-dev @types/react-beautiful-dnd 사용 임시 데이
React에서 React Hook Form 사용 방법에 대해 알아보겠습니다. 기본적으로 Form을 사용할 때 작성하는 코드입니다. 하나의 input 이지만 여러 개의 input 을 사용할 경우 useState 와 onChange 이벤트가 많이 생성됩니다. 그리고 Validation Check 하는 코드도 복잡해집니다. 123456789101112131415
Recoil 사용 방법에 대해 알아보겠습니다. Recoil Recoil는 페이스북에서 만든 React를 위한 상태 관리 라이브러리입니다. Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있습니다. 설치 Recoil 패키지는 npm에 존재합니다
ApexCharts는 데이터를 시각화해주는 차트 라이브러리입니다. 무료로 사용할 수 있고, Js, Angular, React, Vue를 지원합니다. ApexCharts를 사용하여 React.js 에서 간단하게 차트 만드는 방법에 대해 알아보겠습니다. 설치 apexcharts 와 react-apexcharts 라이브러리를 같이 설치합니다. 1$ npm in
React Query는 데이터 Fetching, 캐싱, 동기화, 업데이트, 에러핸들링 등 비동기 과정을 쉽게 만들어 주는 React 라이브러리입니다. React Query를 사용하면 기존의 서버 데이터를 가져오거나 업데이트하는 코드를 축약할 수 있고 캐싱 처리가 간단해졌습니다. 간단하게 useQuery를 사용하여 코인들의 정보를 조회하는 코드를 통해 Rea
Nested Routes는 route 안에 있는 또 다른 route입니다. React Router 가 v6로 바뀌면서 Nested Routes 만 아니라 Route 사용하는 방법이 바뀌었습니다. 전 5 버전과 현재 6 버전 사용법을 비교하였습니다. React Router v5 nested routes 구현하는 방법은 자식 route를 부모 route의
React에서 TypeScript를 적용하고 사용 방법에 대해 알아보겠습니다. 설치 create-react-app 명령어에 typescript 옵션을 추가합니다. 1$ npx create-react-app typescript --template typescript Typescript를 추가하지 않은 기존 프로젝트가 있다면 다음 명령어를 실행하여 설치합니다
React에서 Styled Components를 사용하는 방법에 대해 알아보겠습니다. 설치 Visual Studio Code를 사용 시 Styled-Component 자동 완성을 위해 vscode-styled-components 플러그인을 설치합니다. 1$ npm i styled-components https://styled-components.com/
React로 개발 시 기본적인 디자인을 적용하기 위해 고민이 많이 됩니다. 유료 템플릿 프로젝트를 구매해서 사용할 수 있지만 매번 사는 게 부담이기 때문에 디자인을 하기 무척 힘듭니다. 그래서 검색하던 중에 편리하게 디자인 할 수 있도록 지원해 주는 것들을 몇 가지 찾을 수 있었습니다. 1) Ant Design 리액트와 타입스크립트(Typescript