본문 바로가기

분류 전체보기

 (989)
리액트 쿼리 : 렌더링 최적화 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] ..
React에서 마진 대신 Spacer 컴포넌트 활용하기 원문 보기 Let's Bring Spacer GIFs Back! The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs. In this article, we'll see how I use a Spacer component to solve common layout problems, and why it's often a great tool for the job in www.joshwcomeau.com TL;DR 그리드, 플렉스를 사용하는 경우가 아니면서 마진이 필요한 경우, Spacer 컴포넌트를 고려해본다. HomeButton 컴포넌트를 만들어 봅시다. f..
Styled-component와 Tailwind 함께 사용하기 with Twin Macro 원문 보러가기 Tailwind는 맞춤형 디자인을 빠르게 구축하기 위한 유틸리티 퍼스트 CSS 프레임워크입니다. 단독으로 React 앱의 스타일 설정에 사용할 수도 있지만, Styled Components와도 잘 사용할 수 있습니다. Tailwind CSS, Styled Components 및 Twin Macro를 사용하여 CSS를 한 줄도 작성하지 않고 form 컴포넌트를 만들어 봅니다. 왜 이 세가지를 동시에 사용하죠? Tailwind 클래스는 상당히 길 수 있고, 이는 컴포넌트의 가독성과 유지보수성을 저해합니다. Styled Components의 경우 직접 스타일을 작성해야 합니다. Tailwind CSS는 유틸리티 클래스를 지원하고, Styled Components는 CSS-in-JS의 도움으로 컴..

티스토리툴바