react (13) 썸네일형 리스트형 useMutation useMutation ? 데이터를 생성 / 업데이트 / 삭제할 때 주로 사용합니다. useQuery optimistic update을 활용해서 성공을 예상하며 미리 UI부터 갱신할 수 있습니다. Option onMutate: (variables:TVariables) => Promise|TContext|void mutationFn이 실행되기 전에 먼저 실행할 함수입니다. mutation 함수가 전달받은 파라미터가 동일하게 전달됩니다. optimistic update 사용 시 유용한 함수입니다. 여기서 반환된 값은 onError, onSettled 함수에 전달됩니다. onSuccess: (data: TData, variables: TVariables, context?: TContext) => Promise .. useRef 를 사용하여 scrollEvent 만들기 Ref 란? reference의 약자로 참조라는 뜻입니다. DOM을 직접 참조하기 위해 사용합니다. Ref를 사용하여 element가 참조하는 변수에 접근해 변경하고, element를 제어할 수 있습니다. ref의 장점 컴포넌트를 재사용했을 때 id를 사용하면 유일해야 하는 id 는 더이상 유일하지 않고, 문제가 생길 수 있습니다. ref를 사용해야 할 때 스크롤 이벤트 포커스, 텍스트, 미디어 재생 관리 등 canvas ... useRef 사용하여 스크롤 이벤트 만들기 const Test = () => { const scrollRef = React.useRef(); // ref 변수 선언 const scrollToTop = () => { const { scrollHeight, clientHeight }.. [react] 다국어 적용하기 - 3편 (다국어에 변수 넣기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! [react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! react 에서 다국어 적용하기 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm in code00.tistory.com 1. {t("testText", {넣을 변수명})} 으로 데이터를 넣는다. src/Test.js import i18n from "languages/i18n"; import { useTranslation } from "react-i18next"; cons.. [react] 다국어 적용하기 - 2편 (언어 변경 버튼 만들기) 전 포스트에 이어서 작성하는 내용이므로 설치 및 다국어 적용이 안되신 분은 앞의 포스트를 보고 와 주세요! react 에서 다국어 적용하기 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm install i18next react-i18next 2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다. src/language/i18n.js import i18n from "i18next"; impor.. code00.tistory.com 1. 사용할 컴포넌트에서 i18n 불러오기 src/Test.js import i18n from "languages/i18n"; import { useTranslation } from "r.. [react] 다국어 적용하기 - 1편 (feat.react-i18next) 1. i18next 와 react-i18next 를 설치한다. npm install i18next react-i18next 2. src 폴더 아래에 language 폴더를 생성하고 i18n.js 파일을 작성한다. src/language/i18n.js import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import en from "languages/en.json"; import ko from "languages/ko.json"; i18n .use(initReactI18next) .init({ resources: { en: { translation: en, }, ko: { translation: ko, }, }, lng:.. 이전 1 2 다음
