[ 같이 시작하기 : https://github.com/y0ngha/react-calculator/tree/Initial_start ] 테스트 코드 작성 전 참고 문서 Jest Jest-Mock React-Testing-Library TDD를 이용해 코드를 작성할 때에는 항상 지켜야하는 순서가 있다. "요구사항 분석/파악" → "테스트 코드 작성" → "라이브 앱 작성" 위 순서에 맞게 글을 진행해보도록 하겠다. 테스트 가동 # NPM npm test # Yarn yarn test 요구사항 분석/파악 위 링크 되어있는 깃허브를 들어가보면 알겠지만, 이번에 만들 앱은 "계산기"다. 계산기의 요구사항을 분석하고, 파악해보자. 사칙연산이 가능해야함. 숫자는 0~9까지 있음. 'CLEAR' 버튼을 누르게 될 경..

React-Testing-Library(RTL) CRA(create-react-app)에 기본적으로 내포되어 있다. 별도 설치 필요시 아래 명령어로 설치 가능하다. yarn add --dev @testing-library/react Jest와 상호 보완적인 관계다. Jest를 통해 전반적인 기능은 테스트가 가능하나,React 컴포넌트를 렌더링하고 테스트하기 위해서는 몇가지 기능이 더 필요하기 때문이다. (React에서는 Enzyme 말고 RTL을 사용하면 되는 것 같다.) Jest : 자체적인 Test Runner와 Test Util 제공 RTL : Jest + React 컴포넌트 Util 제공 엄밀히 말하자면 RTL이 Jest를 포함하고 있는 구조다. Query Rendering된 DOM Node에 접..

해당 글에는 GraphQL이 나오니 모른다면 이해가 어려울 수 있다. 아래 링크를 통해 먼저 알고 가도록 하자. [ Graph QL ] [ 완성 코드 보러가기 ] [ 참고문서 : React-Query ] → 실제 사용은 되지 않으나 사용법이 매우 유사함. 라이브러리 React.js에서 GraphQL 서버와 통신할 때 주로 사용되는 라이브러리는 크게 3가지가 있다. Relay 퍼포먼스, 네트워크 트래픽 최적화 / 높은 러닝커브 Apollo Client 데이터 캐싱, UI 업데이트 urql 단순성과 확장성에 중점, React에 포커스 되어 있음, Relay, Apllo Client 보다 이후에 나왔음. 위 3개의 라이브러리에 모두 장단점이 있으니 찾아서 사용하면 될텐데, 이 글에서는 Apollo Client..

React.js에서 Lazy Image Loading을 구현하기 위한 방법이다. 해당 Component를 사용하게 되면 Lazy Image Loading을 구현할 수 있다. 먼저 코드를 보면서 설명해보도록 하겠다. import React, {useEffect, useRef, useState} from 'react'; interface ILazyImageProps { imgSrc: string; className?: string; alt?: string; } let observer: IntersectionObserver | null = null; const __LOAD_IMAGE__ = "loadImage"; function onIntersection( entries: IntersectionObserver..

React Query 비동기 호출을 다룰 수 있다. 이전 방식의 경우에는 Promise, async/await, Redux의 경우에는 redux-saga, redux-thunk와 같은 middle ware를 사용했을 것이다. 이를 React Query로 모두 교체할 수 있다. (물론 axios, async/await은 반드시 필요하다. 그러니 교체의 개념보다는 조금 더 편리하고 효율 좋게 쓸 수 있다.) React Query의 목적 서버의 State, 클라이언트 State를 분리하여 관리 → Redux의 경우 Store에 서버에서 받아온 데이터와 클라이언트에서 관리하고 있는 데이터를 동시에 관리하고 있을 것이다. 이를 분리하여 사용하기 위함이다. 잘 쓰고 있는데 왜? → Store가 너무 비대해진다. (..

createPortal은 React-dom에서 지원하는 기능으로 v16부터 지원을 시작하였다. 먼저 createPortal의 함수부터 알아보자. createPortal - Node를 원하는 Element 안으로 이동 시키는 함수 - DOM Tree에서 다른 곳으로 이동 시키는 함수 - DOM Tree에서만 이동을 시키고, 실제 React Tree에서는 이동되지 않기 때문에 React 자식요소처럼 작동한다. 그렇기 때문에 이벤트 버블링 또한 React Tree에 맞게끔 작동 된다. 1 2 // in react-dom export function createPortal(children: ReactNode, container: Element, key?: null | string): ReactPortal; cs..