Develope/React 3

Recoil - Cannot update a component (`Batcher`) while rendering a different component 에러에 대하여

Recoil 상태 관리 라이브러리 적용해보는 중에 해당 에러가 발생하였습니다. Cannot update a component (`Batcher`) while rendering a different component ...recoil에서 Batcher라 불리는 컴포넌트를 통하여 RecoilRoot 컴포넌트 내에 있는 값들을 대체하도록 되어있는데, 이러한 내용이 react v16.13.0부터 anti-pattern으로 warning 메시지를 출력하도록 설정되었다는 내용입니다. 2020-07-08 현재까지도 해당 경고 메시지가 발생하며, 해당 메시지가 불편할 경우 v16.12으로 downgrading하여 사용해야할 것 같습니다. 2020-07-02 현재 해당 이슈는 github에 이슈에 보고되어져 있으며, 좀..

Develope/React 2020.07.02

[React]반복문으로 컴포넌트 렌더링시 고유값을 부여하는 이유

Key 속성에 따른 재사용성 Each child in an array should have a unique "key" prop. Check the render method of Component. List 형태 등의 데이터를 통해 컴포넌트를 구성하다 보면 위의 경고 메시지를 보신 적이 있을 것입니다. 해당 경고 메시지는 각각의 컴포넌트에 고유 'key'값을 가져야 하기 때문에 컴포넌트를 확인해달라는 내용으로써, 컴포넌트에 key 속성 값을 고윳값으로 가지도록 수정한다면 해당 경고 메시지를 해결할 수 있습니다. key 속성에 고유의 값을 부여하면 이 데이터는 어떻게 쓰일까요? 부여받은 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인하는 값으로 사용하고 있다고 합니다. Duke Villano..

Develope/React 2020.06.23

CRA(Create React App) 서비스워커(ServiceWorker) 커스텀

개요 CRA(Create React App)를 통하여 생성된 프로젝트는 서비스 워커(serviceWorker) 기능을 제공합니다. CRA에서 기본적으로 제공되는 service-worker.js파일은 아래와 같습니다. CRA에서 서비스워커를 재구성하는 방법은 여러 가지 방법이 있겠지만 workbox를 사용하여 서비스워커를 재구성하는 방법을 설명하고자 합니다. 환경 구성 프로젝트 생성 CRA를 사용하여 프로젝트를 생성합니다. npx create-react-app rca-workbox-customize-deploy 모듈 설치 workbox-build, npm-run-all 모듈을 설치합니다. npm install --save-dev workbox-build npm-run-all workbox-build 모듈 ..

Develope/React 2020.06.13