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..

Angular 프레임워크로 특정 기능을 구현할 때 어떤 방식으로 사용하는지에 대해 알아보겠습니다. UI Component 구현 클래스에 @Component Annotation을 붙여서 생성합니다. HTML 템플릿 정의 인라인 HTML 코드를 사용할 때는 @Component 어노테이션 template 항목을 사용하고, 외부 파일에서 불러올 때는 templateUrl 항목을 사용합니다. 컴포넌트 Property 를 UI에 표시 템플릿의 이중 중괄호 안에 Property를 사용합니다. {{ customValue }}) 컴포넌트 Property 바인딩 대괄호를 사용해서 Property를 바인딩합니다. 이벤트 처리 이벤트 이름을 괄호로 감싸고 핸들러를 지정합니다. Click 양방향 바인딩 [()] 표기를 사용합니..

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 { ..

Angular는 구글이 만든 단일 페이지 웹 애플리케이션 개발을 위한 자바스크립트 프레임워크입니다. 다양한 플랫폼에서 동작할 수 있게 하는 개발 툴과 기능들을 제공합니다. Module 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 주요 부분을 기능단위로 그룹핑하게 해 줍니다. 모든 앵귤러 애플리케이션은 하나의 Root Module을 가집니다. 여러 Feature Module을 가질 수 있습니다. 재사용할 수 있는 기능을 외부에 배포하기 위해 사용되기도 합니다. Component 빌딩 블록 형식 HTML 요소들의 그룹 뷰와 로직으로 구성 $ ng g component todo/todos --module todo/todo.module.ts --export 컴포넌트 내부에서 html, css 코드..

Angular는 Angular CLI를 이용해 프로젝트 관리의 복잡도를 낮추고 Angular 개발에만 집중할 수 있게 합니다. 설치 Angular CLI를 설치하려면 다음과 같은 npm 명령어를 실행합니다. $ npm install -g @angular/cli 설치가 완료되면 ng 명령어를 사용할 수 있습니다. ng 명령어는 Angular CLI에서 제공하는 기능들을 실행하는 역할을 담당합니다. Angular CLI 도움말 옵션을 사용해 확인해 봅니다. $ ng --help ng Commands: ng add Adds support for an external library to your project. ng analytics Configures the gathering of Angular CLI usa..

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호출 함수..