[React Query] 리액트 쿼리 '잘' 사용해보자 - 네트워크 비용 감소 / UX 개선
2023. 5. 9. 17:20
프로그래밍/React
*TanStack Query v4 기준으로 작성된 글입니다. 리액트 쿼리에서 제공하는 옵션과 적절한 메서드를 활용하여 불필요한 API 호출을 없애 네트워크 비용을 줄이고 사용자 경험을 개선시켜 봅시다. [딜리버블] ← 해당 프로젝트에 적용한 내용입니다. 정적 데이터에 staleTime 적용하기 리액트 쿼리의 useQuery의 옵션에는 staleTime이 존재합니다. 이전 게시글에서도 언급한 내용이지만 staleTime은 얼마의 시간이 흐른 뒤에 데이터를 stale(:신선하지 않은)하다고 취급할 것인지를 지정하는 옵션입니다. 기본값이 0이기 때문에 별도로 값을 지정하지 않으면 데이터는 받아오자마자 fresh 상태에서 stale 상태가 됩니다. 캐싱된 데이터가 stale한 상태가 되면 리액트 쿼리는 다음 조..
[React Query] 리액트 쿼리를 왜 사용할까? - 서버 상태 분리
2023. 4. 27. 20:31
프로그래밍/React
리액트 쿼리를 사용하는 이유는 무엇일까? 여러가지 장점이 있지만 서버의 상태와 클라이언트의 상태를 명확하게 분리할 수 있다는 것만으로도 리액트 쿼리를 사용하는 것이 충분히 의미있다는 결론을 내렸다. 서버 상태와 클라이언트의 상태를 분리함으로써 얻을 수 있는 이점 - 특성이 다른 서버 상태와 클라이언트 상태를 분리하여 관리함으로써 상태 관리 효율성 향상 - 코드 간결, 유지보수성 향상 - 신뢰할 수 있는 서버 데이터 (최신 데이터) 2018년 미국에서 GraphQL과 Apollo Client가 인기를 끌었을 때, "Redux는 이제 끝인가요?"라는 질문이 많았다고 한다. 일부 데이터를 가져오는 라이브러리가 전역 상태 관리 라이브러리를 대체한다는 게 무슨 소리일까? Apollo는 원하는 데이터를 정의하고 가..
[React] Github API를 이용하여 자동 팔로우 기능 만들기
2022. 10. 22. 20:25
프로그래밍/React
🔧 삽질 기록입니다. 🔨 프로그래머스 데브코스 프론트엔드 3기에 합류하고 벌써 일주일이 지났네요. 깃허브에서 3기 분들 35명을 일일이 팔로우하다가 한 번에 팔로우 해주는 프로그램을 한 번 만들어봐야 겠다는 생각이 들었습니다. 아래는 완성본입니다. 깃허브 API 깃허브 REST API 공식 문서입니다. GitHub REST API - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com Users 문서의 user 리스트, user 정보, 팔로워 가져오기 등의 API를 postman으로 확인했습니다. 아래는 user의 정보를 가져오는..
[Recoil] 리코일 이해하기
2022. 9. 15. 02:07
프로그래밍/React
Recoil 리코일은 리액트에서 사용할 수 있는 전역 상태 관리 라이브러리이다. 여기서 전역 상태(global state)란 어플리케이션 전체에서 공유되는 state를 의미한다. 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 리코일의 필요성은 위의 공식 문서에서 확인할 수 있다. 간단하게 props drilling으로 인한 불필요한 리렌더링 발생을 방지하고 유지보수의 어려움을 해결하기 위함으로 이해했다. Recoil은 다음 명령어로 설치할 수 있다. npm install recoil Atoms atom(options) | Recoil atom은 Recoil의 상태를 표현한..
[React Query] 리액트 쿼리 이해하기
2022. 8. 22. 13:10
프로그래밍/React
리액트 쿼리란? React Query는 리액트 앱에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업(fetching, caching, synchronizing, updating)을 도와주는 라이브러리다. function Coins() { const [coins, setCoins] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { (async () => { const response = await fetch("https://api.coinpaprika.com/v1/coins"); const json = await response.json(); setCoins(json.slice(0, 1..
[React] Link와 useNavigate
2022. 6. 23. 14:06
프로그래밍/React
Link import * as React from "react"; import { Link } from "react-router-dom"; function UsersIndexPage({ users }) { return ( Users {users.map((user) => ( {user.name} ))} ); } react-router-dom에서 제공하는 Link 컴포넌트는 DOM에서a 태그로 변환 내부적으로 a 태그를 통해 작동되고 사용법도 비슷하지만, 실제 동작은 일반적인 a 태그와 다르게 페이지 자체를 새로고침 하지는 않음 (History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장) 페이지가 새로고침 될 경우 현재 렌더링 되어 있는 컴포넌트가 모두 사라지고 새로 컴포넌트가 렌더링 → 컴포..
[React] Styled-components Naming
2022. 6. 12. 03:38
프로그래밍/React
Styled-components란? Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고 태그나 id, class이름으로 가져와 쓰지 않고 컴포넌트 이름을 쓰듯 스타일을 지정하는 방식 css 파일을 밖에 두지 않고 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 만들어주는 장점이 있음 Styled 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 css를 사용할 수 있음 글 작성 이유 className에 대한 고민이나, BEM 사용법이 맞는지 등.. 고민을 안 하게 되어서 좋았지만 styled-component의 이름을 어..
[React] useRef
2022. 5. 8. 17:13
프로그래밍/React
useRef로 특정 DOM 선택 자바스크립트에서 특정 DOM을 선택해야 하는 경우, getElementById, querySelector과 같은 DOM selector 함수를 사용했다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 있다. 특정 input에 포커스 주기 특정 엘리먼트 크기 가져오기 스크롤바 위치 가져오거나 설정 Canvas 요소에 그리 그리기 등 이러한 경우에 DOM에 직접적으로 접근하기 위해 ref를 사용한다. 더보기 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 이는 잘못 사용된 것이다. 사용은 가능하지만 리액트 사상에 어긋난 설계이다. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 ↔ 자식 흐름으로 교류해야 한다. 이러한 ref를 함수 ..
[React] 이벤트 핸들링
2022. 4. 19. 10:48
프로그래밍/React
이벤트 (Event) 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 onmouseover, onclick 이벤트 등 import React, { useState } from 'react'; const Say = () => { const [message, setMessage] = useState(''); const onClickEnter = () => setMessage('안녕하세요!'); const onClickLeave = () => setMessage('안녕히 가세요!'); const [color, setColor] = useState('black'); return ( 입장 퇴장 ... 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML의 onclick -> ..
[React] component, props, state
2022. 3. 9. 09:39
프로그래밍/React
컴포넌트 앱을 이루는 최소한의 단위 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 존재 클래스형 컴포넌트 class App extends Component { render() { const name = "리액트"; return {name}; } } 함수형 컴포넌트 // 일반 함수 function App() { const name = '리액트'; return {name}; } // 화살표 함수 const App = () => { const name = '리액트'; return {name}; } [참고] 일반 함수와 화살표 함수의 this [javascript] 일반 함수와 화살표 함수의 차이 (feat. ES6) 항상 일반 함수와 화살표 함수의 정확한 차이점을 지나쳐 왔습니다. 단순하게 화살표 함수(A..