리액트 궁금증11 react-csv 사용해서 엑셀 다운로드 해보기 프로젝트에서 관리자 페이지 기능 중에서 사용자나 게시물 데이터를 엑셀로 받을 수 있는 기능을 구현해야했다. 많이 알려진 라이브러리 중에서는 react-csv라는 라이브러리가 있어서 적용을 해봤다. React- csv https://www.npmjs.com/package/react-csv react-csvBuild CSV files on the fly basing on Array/literal object of data . Latest version: 2.2.2, last published: 3 years ago. Start using react-csv in your project by running `npm i react-csv`. There are 300 other projects in the npm.. 2024. 7. 19. React의 fiber 아키텍쳐? (작성중) React는 16버전부터 파이버라 불리는 새로운 코어 아키텍처를 채택했다. 기존에 사용하턴 스택 알고리즘과 완전히 다른 것으로 React가 파이버 아키텍처를 사용해 virtual Dom을 어떻게 다루는지 알아보자. 1. Reconciliation Reconciliation은 재조정 이란뜻으로 react가 변경된 상태에 따라 ui를 효율적으로 업데이트하는 과정입다. react의핵심 기능 중 하나로 virtual Dom을 활용하여 실제 dom 변경을 최소화 한다. 2. 스택 기반의 알고리즘 react에서는 16버전 이전에 스택 기반 알고리즘을 사용해서 컴포넌트 트리를 Reconciliation했다. 이 알고리즘은 재귀적으로 컴포넌트 트리를 탐색하며 필요한 업데이트를 수행하는 방식이고 이 과정에서 스택.. 2024. 7. 19. [react-query] 4. react-query의 useMutation useMutation에서 mutation은 데이터베이스에 새로운 값을 추가하거나 수정, 삭제하는 사이드 이펙트를 가진 함수를 의미한다. 따라서 사이드 이펙트가 발생하는 경우 useMutation이라는 훅을 사용. useMutation과 useQuery의 차이점은 useQuery의 queryFn은 컴포넌트가 마운트 되면 자동으로 실행되지만useMutation은 실제로 mutation하는 함수를 직접 실행해줘야한다.mutate함수를 통해 mutationFn으로 등록했떤 함수를 실행할 수 있고 서버 데이터에 관여할 수 있다. muatate()를 하면 데이터는 변경이 되지만 캐시에 저장된 데이터는 refetch를 하지 않는 이상 기존의 데이터가 그대로 저장되기 때문에 refetch를 해줘야만 변경된 데이터를.. 2024. 6. 17. [react-query] 3. react-query의 캐싱 컴퓨터에 있는 데이터를 가져오는 것에 비해서 서버에서 데이터를 가져오는 일은 시간이 많이 걸릴 수 있다. 그런데 유저가 방금 확인한 데이터를 자주 보는 경우에 서버에서 계속 받아오기 보다는 컴퓨터 어딘가에 저장했다가 백엔드에 요청 할 필요 없이 바로 보여주는게 효과적이다. 이럴 때 캐시라는 걸 사용한다. 1.cache 캐시란 데이터를 미리 복사해놓는 임시 장소, 저장공간의 크기는 작지만 데이터를 가져오는 속도는 빠르다는 장점이 있다. 자주 사용하는 데이터를 캐시에 저장해두면 해당 데이터를 빠르게 가져와서 사용할 수 있다. 브라우저는 기본적으로 캐시를 사용해서 속도를 높이는데, 사이트에 접속해서 받은 데이터를 캐시 형태로 저장해놓고 사용자가 같은 사이트에 접속하면 저장해놓은 데이터를 유저에게 보여준다. .. 2024. 6. 17. [react-query] 2. react-query의 status 리액트 쿼리에는 두 가지 status가 있다.query-status실제로 받아온 data값이 있는지 없는지를 나타내는 상태값useQuery()결괏값의 status값을 통해 확인 가능 fetch-statusqueryFn함수가 현재 실행되는 중인지 아닌지를 나타내는 값fetch-status값을 통해 확인할 수 있다. 1.QueryStatus query-status 는 세 가지 상태값을 가진다.success데이터를 성공적으로 받아왔을때 pending아직 데이터를 받아오지 못했을때 error데이터를 받아오는 중 에러가 발생했을 때 이 세 가지의 상태값들은 useQuery의 리턴값인 isSuccess, isPending, isError와 매칭되며 이 값들을 이용해 현재 쿼리의 상태를 알 수 있다. const .. 2024. 6. 17. 이전 1 2 3 다음
