React Query의 라이프 사이클 A 쿼리 인스턴스가 mount 된다. 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱한다. 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경된다. A 쿼리 인스턴스가 unmount 된다. 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집된다. - v4부터는 기본값이 Infinity로 변경될 예정이라고 한다. 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여준다. staleTime 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간 fresh 상태일때는 쿼리 인스..
리액트 아이콘 리액트의 라이브러리로 수 많은 아이콘을 컴포넌트 형식으로 사용 할 수 있다. 터미널에서 npm을 사용해 설치한다. npm install react-icons --save React icon에서 원하는 아이콘을 찾아서 불러 올 수 있다. React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons ..
React Router 리액트에서 SPA(Single Page Application)을 제작 하기 위해서는 Router(라우터)라는 라이브러리가 필요하다. 한 개의 페이지에서 라우터를 이용해서 여러 개의 페이지를 만들 수 있는 것이다. 설치 터미널로 npm을 통해서 라우터를 설치한다. npm install react-router-dom 라우터의 기본 사용법 import 로 'react-router-dom' 에서 { BrowserRouter, Routes, Route } 를 불러온다. BrowserRouter > Routes > Route 의 구조로 이루어 진다. Route 에는 path 와 element 속성으로 이루어져 있는데, path 는 페이지 URL의 맨 뒤 경로를 나타내고 element 에는 p..
상태(State) 모던 웹프론트엔드 개발 UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다. 즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있다. 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 개발자 입장에선 관리해야하는 데이터들이라고 볼 수 있다. 상태 관리는? 상태를 관리하는 방법에 대한 것 ➡️ 프로덕트가 커짐에 따라 어려움도 커진다. 상태들은 시간에 따라 변화한다. React에선 단방향 바인딩이므로 Props Drilling 이슈도 존재한다. Redux와 MobX 같은 라이브러리를 활용해 해결하기도 한다. Client State & Server ..
Emotion이란? Emotion – Introduction (Edit code to see changes) emotion.sh Emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 프레임워크와 관련없이 사용하는 Framework Agnostic과 React 두 가지 방식으로 사용된다. emotion 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install @emotion/react import 하기 emotion.js를 사용해야 할 컴포넌트에 먼저 import를 해야한다. /** @jsxImportSource @emotion/react */..
주요 HTTP 통신방법 왜 React에서 주로 Axios를 이용해 통신하는지, HTTP 통신을 가능하게 하는 Ajax와 Fetch와 비교해보자. Ajax Ajax는 Asynchronous JavaScript And XML의 약자로, 말 그대로 자바스크립트에서 비동기적 통신을 가능하게 한다. 순수 Ajax는 XMLHttpRequest()생성자를 통해 자바스크립트에서 구현될 수 있지만 JQuery를 통해 Ajax를 보다 쉽게 쓸 수 있기 때문에 주로 JQuery와 함께 쓰인다. 그러나 Promise 기반이 아니고 JQuery를 사용하지 않으면 쉽게 구현하기 어렵다는 단점이 있다. React에서 promise가 async, await과 사용될 때 그 장점을 생각해보면 Ajax는 매력적이지 않다. Fetch F..
Classnames 리액트에서 클래스의 이름을 조건부 로 className을 함께 결합하기 위한 자바스크립트 라이브러리다. classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.2, last published: 6 months ago. Start using classnames in your project by running `npm i classnames`. There are 38065 other projects in the npm registry using classnames. www.npmjs.com 터미널에서 npm을 사용해 설치한다. npm i classnames 아래와 같이 불리언..
