React (22) 썸네일형 리스트형 [Medium 번역글] 코드 품질을 저해하는 6가지 일반적인 React 안티 패턴 보호되어 있는 글입니다. [Medium 번역글] 시니어 개발자가 되기 위한 18가지 React 기술 보호되어 있는 글입니다. [React] 리액트 라이브러리 추천 목록(2024 기준) 기존 Ykss 님이 번역하신 글을 표로 정리한 글입니다 실 사용 경험과는 상관 없이 지극히 개인적 취향을 목적으로 정리하였으니,맨 아래 원문을 참고하시길 바랍니다. 구분이름 및 링크비고build toolVite 패키지 매니저pnpm성능적으로 npm 보다 향상된 pnpm기본적이고 가장 널리 사용되는 건 -> npm모노레포가 필요한 경우 -> Turborepo상태관리ZustandApi context 는 최적화시 개발자가 직접 최적화 해야하는번거로움이 있어 Zustand + tanstack Query 로 풀어낸다데이터 페칭 TanStack QueryREST API 또는 GraphQL API라우팅React Router타입스크립트면 TanStack RouterCSSTailwind CSS https://runebo.. [React] form submit과 관련된 useFormStatus 훅 useFormStatus는 마지막 폼 제출의 상태 정보를 제공하는 Hook입니다form 이 pending 상태일 때 다른 이벤트를 주고 싶을 때 사용하는 용도로 사용됩니다.(예 : submit 버튼의 텍스트를 submitting... 으로 바꾼다던지 ) const { pending, data, method, action } = useFormStatus(); tanstack query 의 useQuery 에서 보던 형태이다. pending: 불리언 값입니다. true라면 상위 이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 false입니다. data: FormData 인터페이스를 구현한 객체로, 상위 이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 이 없는 경우에는 null입니다... [React] React Router의 useFetcher 훅 - 주요 속성 useFetcher는 페이지 전환 없이 서버와 데이터를 주고받을 수 있게 해주는 React Router의 훅입니다.useNavigate 훅과 세트로 기억하시면 좋습니다 1. fetcher.Formhttps://daunje0.tistory.com/201 [React] React Router의 Form vs fetcher.Formfetcher.Form은 페이지 전환 없이 백그운드에서 데이터를 변경하거나 제출해야 할 때 사용합니다. 1. 일반 Form페이지 전환이 발생 전체 페이지가 다시 로드됨 주로 주요 CRUD 작업에 사daunje0.tistory.com 2. fetcher.submit// 프로그래밍 방식으로 데이터 제출fetcher.submit( { email: 'test@test.com' }, .. [React] React Router의 Form vs useFetcher().Form fetcher.Form은 페이지 전환 없이 백그운드에서 데이터를 변경하거나 제출해야 할 때 사용합니다. 1. 일반 Form페이지 전환이 발생 전체 페이지가 다시 로드됨 주로 주요 CRUD 작업에 사용 (예: 새 이벤트 생성, 이벤트 수정)2. useFetcher() .Form페이지 전환 없음 백그라운드에서 데이터 처리 주로 작은 업데이트나 부분적인 데이터 변경에 사용 (예: 좋아요 버튼, 구독 신청, 댓글 작성, 상태 토글 (예: 완료/미완료) ) 예시 ) import { useFetcher } from 'react-router-dom';function NewsletterSignup() { const fetcher = useFetcher(); return ( 구독하기.. [React] React Router의 useNavigation 훅 - state와 주요 속성 useNavigation 이 훅은 페이지 탐색에 대해 알아야 할 모든 것을 알려주어 보류 중인 탐색 표시기와 데이터 변이에 대한 최적화된 UI를 구축할 수 있습니다. 글로벌 로딩 표시기변경이 발생하는 동안 양식 비활성화하기제출 버튼에 사용 중 표시기 추가하기서버에서 새 레코드가 생성되는 동안 새 레코드 상태를 낙관적으로 표시하기업데이트되는 동안 레코드의 새 상태를 낙관적으로 표시하기 1. navigation.state 현재 네비게이션 상태를 나타내는 속성입니다.3가지 상태 값 중 하나를 반환한다"idle" - 기본 상태, 현재 네비게이션이 진행되지 않고 있음"loading" - 데이터를 불러오는 중이거나 페이지 전환이 진행 중"submitting" - 폼 제출과 같은 데이터 변경 작업이 진행 중 보통의.. [React] Redux에서 비동기 작업 처리하는 3가지 방법 Redux 의 Reducers 함수는 다음과 같은 조건이 있습니다.순수함수여야 하며, 사이트 이펙트에 영향을 받지 않아야 하고, 동기적인 코드여야만 한다는조건이 바로 그것입니다. 이는 react 의 useReducer 함수도 같은 조건입니다.그럼 Redux 사용시, 이런 비동기 코드는 어디에서 작성해야하는 걸까요? 3가지 방법이 있습니다. 1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의2. 사용자 정의 action 을 사용( 커스텀 액션 생성자 (Thunk) )3. createAsyncThunk 사용( redux toolkit 만 가능) 1. 비동기 코드 예시 1-1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의const Component = () => { c.. 이전 1 2 3 다음
