📃 Front-End/React.js

📃 Front-End/React.js

React + TS + Style-Components

2022.11.15

포스팅 주 내용은 전역 스타일(Global), 테마(theme), 타입스크립트 적용에 포커스를 맞추겠습니다. react 를 사용해본적이 있거나, 스타일 컴포넌트를 사용해보신 적이 있으신 분들은 아래 코드 순서만 보고 충분히 감을 잡으실 수 있을 거라고 생각 합니다. ✔ 환경 세팅 // 스타일 컴포넌트 설치 yarn add styled-components // 타입스크립트 적용 yarn add --dev @types/styled-components ✔ styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { TitleFont : { fontSize : any; fontF..

📃 Front-End/React.js

React-Query 캐싱에 대하여

2022.11.12

stale 대하여 리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여깁니다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 됩니다. 새로운 query 인스턴스가 마운트될 때( useQuery가 처음 호출될 때 ) 브라우저 화면을 이탈했다가 다시 포커스할 때 네트워크가 다시 연결될 때 특별히 설정한 refetch interval에 의해서 (refetchInterval) refetchOnWindowFocus 옵션 등으로 기본 refetch 설정을 막을 수 있고 staleTime 옵션으로 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수도 있습니다. query에 별다른 action이 없으면 inactive 상태로 ..

📃 Front-End/React.js

react-router-dom V6 공부

2022.11.11

설치 yarn add react-router-dom ✔ createBrowserRouter() const router = createBrowserRouter([각 경로의 배열]) App.js import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter([]); export default function App() { return } 위와 같이 상위 컴포넌트에 세팅을 해줍니다. 컴포넌트 경로에 추가하기 import React from 'react'; import { createBrowserRouter, RouterProvider ..

📃 Front-End/React.js

React + TypeScript(state)

2022.10.26

기존의 useState 사용 방식 const [count, setCount] = useState(초기 값); useState 를 사용하면 value 를 얻게 됩니다. 첫 번째 값은 state 의 value 입니다. 두 번째 값은 value 의 상태 변화 함수 입니다. useState 에 초기 값을 넣으면 ❓ const [count, setCount] = useState(1); count 에 숫자 값이 들어온다고 TypeScript 가 초기 값을 가지고 추론을 한 것 입니다. 또한 const [count, setCount] = useState(1); setCount(2); 아무 일도 생기지 않습니다. 작성해야 하는 대로 작성을 했기 때문에 하지만 만약 string 타입을 보내게 되면, 에러가 있다고 말해줍..

📃 Front-End/React.js

React + TypeScript(Optional Props)

2022.10.26

default props App.tsx import Circle from "./Circle"; function App() { return ( ); } export default App; Circle.tsx import React from "react"; import styled from "styled-components" interface ContainerProps { bgColor : string; } const Container = styled.div` width : 200px; height : 200px; background-color : ${(props) => props.bgColor}; `; interface CircleProps { // TypeScript 에게 bgColor 는 문자열이라고 ..

📃 Front-End/React.js

React + TypeScript(interface)

2022.10.26

기본적인 타입 스크립트에 대한 설명은 별도의 포스팅을 통해 정리를 했습니다. 여기서는 리액트에서 타입 스크립트를 어떻게 적용 할 수 있는지 공부하고 정리 합니다! + 스타일 컴포넌트 적용 설치 ❓ 1. 처음부터 CRA + 타입 스크립트를 할 때 npx create-react-app my-app --template typescript or yarn create react-app my-app --template typescript 2. 프로젝트 중간에 설치하는 방법 npm install --save typescript @types/node @types/react @types/react-dom @types/jest or yarn add typescript @types/node @types/react @type..

📃 Front-End/React.js

useInfiniteQuery 호출

2022.10.26

✔ useInfiniteQuery 가져오기 import InfiniteScroll from "react-infinite-scroller"; import { Person } from "./Person"; // 이 부분 import { useInfiniteQuery } from "react-query"; const initialUrl = "https://swapi.dev/api/people/"; const fetchUrl = async (url) => { const response = await fetch(url); return response.json(); }; export function InfinitePeople() { // 컴포넌트에서 호출 const {data, fetchNextPage, hasNe..

📃 Front-End/React.js

React Query - 무한 스크롤(Infinite Scroll)

2022.10.26

사용자가 페이지의 특정 지점을 누르거나 버튼을 클릭하면 더 많은 데이터가 로딩됩니다. React Query 는 데이터와 페이지 번호를 추적하게 됩니다. 무한 스크롤 이란 ❓ 사용자가 스크롤 할 때마다 새로운 데이터를 가져오는 것 입니다. 모든 데이터를 한 번에 가져오는 것보다 훨씬 효율적 입니다. 사용하는 지점 사용자가 버튼을 클릭하여 새로운 데이터를 요청하거나 페이지의 특정 지점을 스크롤 했을 때 새 데이터를 가져오게 하거나 ( 페이지의 하단 등 ) ✔ useInfiniteQuery 의 특징 반환 객체에서 반환된 데이터 프로퍼티의 형태가 다릅니다. useQuery : 단순히 쿼리 함수에서 반환되는 데이터 useInfiniteQuery : 두 개의 프로퍼티를 가지고 있습니다. 하나는 데이터 페이지 객체 ..

이전
1
2
3
4
···
6
다음

'📃 Front-End/React.js' 카테고리의 글 목록

티스토리툴바