Programming/React13

• 

  React-Query란? React-Query야 반가워! 근데 어렵군... React-Query란? React-Query는 서버에서 가져온 데이터를 웹 브라우저 앱에서 사용하기 쉽게 도와주는 기술이다. 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편리하게 해주는 데 사용된다. 앱이 간단하다면 useState와 context API만 사용하더라도 대부분의 client state를 다룰 수 있다. 그러나 복잡도가 올라가고 성능 향상의 필요성이 생긴다면 도구가 필요해진다. React-Query는 Redux보다 진입 장벽이 낮으면서, hook 기반의 로직으로 되어 있어 해당 훅을 사용하는 컴포넌트에서 상태 값의 변경을 간편하게 파악하여 리렌더링을 유발하게 해준다. React-Query의 기능과 장점 React-Query는 .. Programming/React 2022. 12. 12.

• [RecoilRoot] RecoilRoot란? https://velog.io/@hwanieee/Recoil-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 Recoil 사용하기(feat. 간단 예제) Installation CRA(npx create-react-app)로 리액트 파일을 생성한 후 아래 cli로 리코일을 설치한다. >js // app.js import React from 'react'; import { RecoilRoot, atom, se velog.io Programming/React 2022. 12. 8.

• 

  [React] useEffect 무한 루프 문제 https://velog.io/@eunjin/React-useEffect-%EB%AC%B4%ED%95%9C%EB%A3%A8%ED%94%84-%ED%83%88%EC%B6%9C%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 [React] useEffect 무한루프 탈출하는 방법 기존에 클래스형 컴포넌트 방식으로 짠 코드를 함수형 컴포넌트로 변환을 했는데, 특정 컴포넌트만 클릭하면 미친듯이 렌더가 일어나 브라우저가 다운되는 현상을 겪었다. 알고 보니 componentDidM velog.io Programming/React 2022. 11. 10.

• [React] multipart/form-data 전송 https://velog.io/@shin6403/React-Form-Data-%EC%A0%84%EC%86%A1 [React] Form Data 전송 회원가입을 할때, 또는 어떤 페이지에서 파일(이미지), 제목, 내용을 DB에 저장하는 페이지가 있다고 가정했을때, 파일을 http 통신으로 전송 하려면 formData 객체를 이용하여 보내야 한다.formData 객 velog.io https://ko.javascript.info/formdata#ref-3760 FormData 객체 ko.javascript.info https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api [JS] 📚 FormData 사용법 & 응용.. Programming/React 2022. 11. 1.

• 

  [React] 음성 녹음, 녹음 파일(.weba) 다운로드 구현하기 싼타클리닉 서비스에서 구현했던 음성 녹음 및 녹음 파일 전송 기능 기록이다. react로 음성 녹음 기능을 구현해보자 갑자기 왜? 친구들과 프로젝트를 하던 중, 음성녹음 기능을 필요로 하는 웹을 구현하게 되었습니다... velog.io TS가 적용되지 않은 예제이므로 따로 처리해야 한다. 또한 deprecated된 메서드를 사용하고 있어 업데이트가 필요하다. 그러나 작동 자체에는 문제가 없다. import React, { useCallback, useState } from 'react'; import axios from 'axios'; import { ReactMediaRecorder } from 'react-media-recorder'; // https://stackoverflow.com/questio.. Programming/React 2022. 11. 1.

• 

  [React + TS] "Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes'" Dispatch; }' is not assignable to type 'IntrinsicAttributes' 에러 해결 과정을 담은 글이다. 부모 컴포넌트(calendarPage.tsx) import React from 'react'; import { CalendarPageContainer } from './styles'; import { CalendarPageTitle } from './styles'; import { AdventCalendarBox } from './styles'; import { CalendarDetail } from '../calendarDetail'; export function CalendarPage() { // 모달창 노출 여부 const [calendarOpen, setCa.. Programming/React 2022. 10. 27.