본문 바로가기

Programing/React72

모듈의 exports는 선언문에서? 하단에서? // 선언문에서 바로 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}// 하단에서 모아서 export 하는 use caseexport function Login() { ...}export fuction Logout() { ...}export { Login, Logout }  위 예제는 컴포넌트로 예를 들었지만, 물론 보통 한 파일에서 컴포넌트를 여러 개 export 하는 경우는 잘 없었던 것 같다.함수를 여러 개 export 하는 경우를 생각해보면 더 적절하겠다. 둘의 기능은 완전히 같다. 단순히 취향 차이이다. 각각 장단점이 있는데,선언문에서 바로 export 하는 경우 함수나 컴포넌트가 export 됨.. Programing/React 2024. 8. 2.
리액트에서 API 호출로 반환 받은 값을 렌더링 하는 기본 패턴 import { useEffect, useState } from "react";// axios importexport default function App() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.date); }); }, []); return ( 상품 목록 페이지 {products && products.map(products => { return {products.name} })} .. Programing/React 2024. 7. 29.
Restful API Axios로 호출하는 기본 패턴 (useState, useEffect 사용) + strict mode import { useEffect, useState } from "react";import "./styles.css";import axios from 'axios';export default function App() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.data); }) }, []); console.log(products); return ( );} db.json이라는 데이터 파일을 만들고 json-server로 로컬에서 node.js .. Programing/React 2024. 7. 27.
함수형 컴포넌트 자동완성 VSCode 플러그인 function Login () { return ( ... )}export default Login; 컴포넌트를 만들 때마다 이런 기본 구조를 작성하는 것이 여간 귀찮은 일이 아니다.그리고 또 자동완성 기능을 사용하지 않으면 typo의 위험이 언제나 도사리고 있다. 따라서 rfc라는 명령어만 입력해도 함수형 컴포넌트를 자동으로 입력해주는 플러그인이 유용하게 쓰이는데,설치하면 하면 된다. 링크는 아래. https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets ES7+ React/Redux/React-Native snippets - Visual Studio MarketplaceExtension for V.. Programing/React 2024. 7. 27.
Supabase + TanStack Query + Intersection Observer :: infinite scroll 구현 개발 환경ReactViteTypeScript사용 라이브러리TanStack QuerySupabaseReact-Intersction-Observer패키지 설치yarn add @tanstack/react-query @supabase/supabase-js react-intersection-observer 단, supabase 셋업은 완료된 상태로 가정함.데이터 fetch 함수 작성supabase에서 어떤 데이터를 가져올 것이고, 데이터를 스크롤 한 번당 얼마나 끊어서 가져올 것인지 설정하는 함수이다.별도 컴포넌트로 작성해도 되고, useInfiniteQuery를 작성한 커스텀 훅 바로 위에서 작성해도 좋다.아니면 fetch만 모아 놓은 api.ts 같은 파일에 다른 fetch 함수들과 모아서 작성해도 좋다.im.. Programing/React 2024. 6. 29.

티스토리툴바