본문 바로가기

FrontEnd

 (437)
리액트 쿼리 : 테스트 / 테스팅 원문 보기 : https://tkdodo.eu/blog/testing-react-query Testing React Query Let's take a look at how to efficiently test custom useQuery hooks and components using them. tkdodo.eu 순수하지 않은 컴포넌트 useContext, useSelector, useQuery를 사용하는 컴포넌트들은 순수하지 않습니다. 다른 환경에서 호출하면 다른 결과가 발생하기 때문입니다. 해당 컴포넌트들을 테스트 할 때에는 "의존성" 공급에 대해 생각해야 합니다. 네트워크 요청 흉내내기 React Query는 비동기 서버 상태 관리 라이브러리이므로 컴포넌트가 백엔드에 데이터를 요청할 가능성이 높습니다..
리액트 쿼리 : 쿼리 상태 체크 원문 보기 : https://tkdodo.eu/blog/status-checks-in-react-query 쿼리 상태는 아래 4개 중 하나입니다 success : 쿼리가 성공했으며 이에 대한 데이터가 있습니다. error : 쿼리가 실패했으며, 이에 대한 정보를 담은 에러가 설정되었습니다. loading : 아직 쿼리 데이터가 없으며, 처음 로딩 중입니다. idle : 사용이 설정되지 않아 쿼리가 실행된 적이 없습니다. 업데이트: React Query v4에서 idle 제거 isFetching 플래그는 요청 중일 때만 true지만, 내부 상태머신의 상태가 아님. 자세한 내용은 #13: Offline React Query 참조 로딩 상태, 오류 상태를 먼저 확인하기 명시적 사용자 상호작용 시에만 데이터를 ..
리액트 쿼리 : 렌더링 최적화 https://tkdodo.eu/blog/react-query-render-optimizations React Query Render Optimizations An advanced guide to minimize component re-renderings when using React Query tkdodo.eu isFetching transition 아래 예제는 길이가 변경되었을 때, 한번 렌더링 되지 않습니다. export const useTodosQuery = (select) => useQuery(['todos'], fetchTodos, { select }) export const useTodosCount = () => useTodosQuery((data) => data.length) functio..
리액트 쿼리 : 서버 응답 변환 위치 원문 : https://tkdodo.eu/blog/react-query-data-transformations 어떤 방법이 가장 좋을까? 그때그때 다르다. - 모든 개발자, 항상 0. GraphQL 사용과 백엔드 개발자의 지원 우리가 할 일이 없음. 하지만 항상 가능한 것이 아님. 1. 쿼리 함수 안에서(queryFn) queryFn은 useQuery에 전달하는 함수입니다. Promise를 반환할 것으로 예상하고 결과 데이터는 쿼리 캐시에 저장됩니다. 이 함수가 항상 백엔드가 제공하는 구조로 데이터를 반환할 필요는 없습니다. const fetchTodos = async (): Promise => { const response = await axios.get('todos') const data: Todos ..
리액트 쿼리 : 반드시 알아야 하는 상식 https://tkdodo.eu/blog/practical-react-query Practical React Query Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful... tkdodo.eu 해당 게시물을 요약정리한 글임 리액트 쿼리와 서버 상태 Apollo Client는 서버 데이터와 서버 데이터 캐시를 이용한, 서버 사이드 상태 관리의 신기원을 열었음. 이는 수 많은 전역 상태의 클라이언트 측 (중복) 관리 부담을 줄여줬으나, GraphQL을 도입하기 위해선 백엔드의 조정이 가장 큰 장벽이었고, 오버페칭, 언더페칭을 포함..
useState에 대해 좀 더 잘 알아보기 #3: Things to know about useState #4: useState for one-time initializations 두 게시물을 짬뽕해서 정리함. 1. 함수형 업데이터 클로저를 사용하여 setState 함수를 호출할 시, 배치 처리되는것 같은 느낌을 줍니다. 이는 우리의 의도와 다를 수 있습니다. 함수형 업데이터는 매 setState호출마다 이전 호출 결과 상태를 사용할 수 있게 해줍니다. 기존 클로저를 사용한 업데이트 : 결과는 항상 1 증가합니다. function App() { const [count, setCount] = React.useState(0) return ( { setCount(count + 1) setCount(count + 1) }} > 🚨 This will not..
useState의 함정 : useEffect와 사용 시 주의할 점. useState를 너무 많이 사용하지 않기 단일 진실 원천 - 파생된 상태를 저장하기 위한 상태 피하기 상태란 무엇인가요? 공식문서에 따르면 각 데이터 조각에 대해 세 가지 질문을 합니다. 1) props를 통해 부모로부터 전달됩니까? 그렇다면 아마도 상태가 아닐 것입니다. 2) 시간이 지나도 변함없나요? 그렇다면 아마도 상태가 아닐 것입니다. 3) 컴포넌트의 다른 상태 또는 prop을 기반으로 계산할 수 있습니까? 그렇다면 상태가 아닙니다. 3번 케이스에서 주의할 점 : 비동기 데이터를 이용한 파생 상태를 state에 저장하지 않습니다. useEffect는 상태를 React 외부의 요소(서버, 브라우저 스토리지 등)와 동기화 하는 경우에만 사용합니다. import { fetchData } from '..
useState와 useReducer의 사용사례 TL;DR: useState : 간단한 상태. 상태가 같이 업데이트 되야 하는지를 고려하여 묶고 분리한다. useReducer : 서버 상태와 섞여있는 경우, 로직 구현 시 상태 간 종속성이 필요한 경우. 복잡한 로직. 어떤 상태가 함께 속하는지(업데이트 되어야 하는지) 추론할 수 있는 방식으로 코드를 구조화하면 성능 문제와 상관없이 장기적으로 가독성과 유지 보수에 도움이 됩니다. 별도의 useState 상태가 독립적으로 업데이트되는 경우 ex) 성과 이름 // asis state = { firstName: '', lastName: '', } // tobe const [firstName, setFirstName] = React.useState('') const [lastName, setLastName] ..

티스토리툴바