FE/REACT (28) 썸네일형 리스트형 [React] UseInfiniteQuery와 관련된 내용 정리 데이터를 저장하고 가져오는건 firebase를 이용하고 리액트를 사용해서 개인 프로젝트를 진행하고 있돠 이렇게 개념이 숑숑 비어있다니 스스로 놀랍댜 거의 양파같은 여자 여튼 한번 제대로 짚고 넘어가기 위해서 이번에 사용한 UseInfitieQuery랑 , useInfiniteQuery와 같이 사용한 개념들에 대해 정리 고고링 UseInfitieQuery파라미터 값만 변경해 동일한 useQuery를 무한정 호출할때 사용한다. 이걸 왜 사용하는 거지 ??이번에 무한 스크롤을 구현하기 위해서 사용해 보았다. useQuery와 사용법이 비슷한듯 다른데,useQuery는 ReactQuery를 이용해 서버로부터 데이터를 조회해올때 사용한다면 ( 단순히 쿼리함수에서 반환된 데이터를 의미하면) useInfini.. [React] ReactQuery의 구조 & useQuery 흐름 React Query리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리 서버 상태 관리를 위해 이 라이브러리를 사용데이터 조회, 캐싱, isLoading, isError등 과 같은 기존 작업을 더욱이 편리하게 제공 QueryClientProvider=> 초기 작업이라고도 할 수 있음 리액트 쿼리 사용을 위해 최상단에서 QueryClientProvider을 사용해 감싼다.쿼리 인스턴스 생성 후 client={queryClient}작성 위의 해당하는 내용을 담은 코드 import { AlertContextProvider } from '@contexts/AlertContext'import { QueryClient, QueryClientProvider } from 'react-query';c.. [PJ] BrowserRouter, Routes,Route 간단 정리 프론트 엔드에서 vue,js를 사용하든 리액트를 사용하든 페이지 이동을 하기 위해서 리액트 라우터를 사용한다.라우팅은 무엇이길래? 이걸 사용할까 요청 url에 따라 해당 url에 맞는 페이지를 보여주는 것 리액트는 기존 mpa방식의 웹페이지가 아닌 spa이기 때문에 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다.그렇기 때문에 url에 따라 선택된 데이터를 페이지에 렌더링 해주는 것이다. BrowserRouterHTML5의 HistoryAPI를 사용해 UI를 동기화 해줌 URL 을 직접 조작하면서도 페이지 전체를 리로드 하지 않는 SPA구현 가능 Routes Routes컴포넌트를 사용해 여러 route를 감싸줌경로 일치의 명시성을 높여줌 Route각 Route는.. [REACT]0105 ●외부 API를 가져오기 api테스트 할때 ↓ 요거 사용함 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com ●promise promise란? 비동기 처리에서 사용되는 객체, axios또한 promise를 기반으로 만들어짐 api로부터 데이터를 페치하기 위해서 , fetch로 url을 전달할 수 있다. 비동.. [REACT]0103 ●연산자 -조건(삼항) 연산자 pages > 1000 ? "over a thousand" : "less than 10000"; //첫번째 부분(pages>100): 상태 //두번째 부분: 상태가 참일 경우 보여줌 // 3번째 부분: 상태가 거짓일 경우 보여줌 -논리 연산자 (&& ) 왼쪽에서 오른쪽으로 평가할때 연산자는 처음으로 만나는 거짓같은 피연산자의 값을 반환 만약 모두 참이면 마지막 피연산자의 값을 반환함 //AND연산자는 불리언이 아닌 값을 보존함 result=''&& 'fff' //''빈문자열 반환 result = 2&&0 //result에 0이 나옴 ●Arrow Function -함수 작성하는 방법 인수, 화살표 , 반환하려는 항목 //일반 함수식 /*function getYear(str) .. [REACT]0102 리액트 사용 이유 ●프론트 엔드 프레임워크가 필요한 이유? 사용자 인터페이스를 데이터와 동기화하는 것이 어렵기 때문에 프론트엔드 프레임 워크가 존재함 ● 바닐라 js에서 문제점이 발생 복잡한 프론트 단을 구성하려면 다량의 직접 DOM트래버링과 조작이 필요함 앱에 버그가 많이 생김 ● 리액트 리액트는 UI를 다시 렌더링하여 상태 변경에 반응한다. 1. 웹페이지에 구성 요소를 렌더링해 현재 상태에 기반한 사용자 인터페이스로 만든다. 2. 사용자 인터페이스를 상태와 동기화하는 데 뛰어나다. ● 리액트 사용법 브라우저에서 렌더링 하기 위해서는 React DOM 이 필요함 개발하면서 참고하기 https://react.dev/ React React is the library for web and native use.. [react-native] 개념 정리즁 ■ 핵심 컴포넌트 & 컴포넌트 스타일링 text,view import 하는 react-native 라이브러리 존재--> 내장 컴포넌트 jsx코드에서 사용 div, h2태그 사용 X 이유) 네이티브 기기는 브라우저가 아니라서 dom을 가지고 있지 않아서 html 요소를 지원하지 않음 react native의 본질은 내장된 핵심 컴포넌트를 다루는 것 react native는 브라우저가 아니라 css제공하지 않음, 그래서 style을 사용하는데 , 이는 여러 핵심 컴포넌트의 프로퍼티를 이용해 인라인 스타일을 적용하거나, stylesheet객체를 사용함 -->javascript에서 스타일링을 작성하는 것 ■ 핵심 컴포넌트로 자세히 작성하기 Text, View같은 코어 컴포넌트에 대해서 자세히 알아보기 - 웹에서.. 리덕스 리액트 프로젝트에서는 대부분의 작업을 할 때 부모 컴포넌트가 중간자 역할을 하게 된다. 컴포넌트 끼리 직접 소통 하는 방법이 있긴 하지만, 그렇게 하면 코드가 많이 꼬여버리기 때문에 절대 권장되지 않는 방식입니다. (ref 를 사용해서 작업을 할 순 있음.) App 에서는 인풋의 값인 input 값과, 이를 변경하는 onChange 함수와, 아이템을 생성하는 onCreate 함수를 props 로 Form 에게 전달해줍니다. Form 은 해당 함수와 값을 받아서 화면에 보여주고, 변경 이벤트가 일어나면 부모에게서 받은 onChange 를 호출하여 App 이 지닌 input 값을 업데이트 함. 그렇게 인풋 값을 수정하여 추가 버튼을 누르면, onCreate 를 호출하여 todos 배열을 업데이트 함 이 해당.. 이전 1 2 3 4 다음 목록 더보기
