반응형
반응형
1. refetch와 invalidate의 차이React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.2. refetch의 특징refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하..
❤️🔥MSW 소개 MSW(mocking service worker)는 API를 mocking할 수 있는 라이브러리 입니다. mocking의 장점 테스트 코드의 의존성을 덜어내 독립적인 테스트 코드를 작성할 수 있습니다. 실제 응답을 기다리지 않기 때문에, 속도 측면에서 비용절감이 될 수 있습니다. ❗️MSW를 React에서 사용해보자. 우선 msw를 설치해줍니다. npm install msw@latest --save-dev 그 다음 msw를 실행해줍시다. npx msw init public/ --save "msw": { "workerDirectory": [ "public" ] } 이 결과로 package.json에 다음과 같은 스크립트가 추가됩니다. 세팅이 완료되었습니다. 이제 mocking 모듈을 만..
이번 시간에는 React의 Context를 익히는 시간을 가지려고 합니다. ❓언제 Context를 사용할 수 있을까요? Context는 전역에 상태를 저장할 수 있습니다. 이는 일일이 컴포넌트에 props를 넘겨주지 않게 해줍니다. export default function App() { const [prop, setProp] = useState() return ( ); } export default function Box({prop}) { console.log(prop) // App 부모 요소에서 전달받은 prop 값 return ... props을 넘겨주는 예시입니다. Constext를 사용함으로써 props를 넘겨주지 않아도 됨으로써, 의존성을 없앨 수 있고, drilling을 없애 가독성을 향상시..
useState를 잘못 사용하여 재 렌더링이 되지 않는 상황을 마주쳤습니다. 기본적인 부분이라고 생각하지만, 저와 같은 실수를 하시는 분이 있으실 수 있어 블로그 포스팅을 해봅니다! ❓React 요소가 재 렌더링 되는 시점? 기본적으로 React의 요소가 재 렌더링 되는 경우는 다음과 같습니다. State가 변경되었을 때 Props가 변경 되었을 때 부모 컴포넌트가 재 렌더링 될 때 컨텍스트(useContext 훅을 사용하여)에 의존하고 있는 경우 컨텍스트 값이 변경될 때 네 가지 상황에서 재 렌더링이 실행됩니다. 그런데 제가 마주친 상황은 State가 변경되었음에도, 재 렌더링이 되지 않는 상황이었습니다. //... const [files, setFiles] = useState([]); const in..
내 블로그 - 관리자 홈 전환 |
Q
Q
|
---|---|
새 글 쓰기 |
W
W
|
글 수정 (권한 있는 경우) |
E
E
|
---|---|
댓글 영역으로 이동 |
C
C
|
이 페이지의 URL 복사 |
S
S
|
---|---|
맨 위로 이동 |
T
T
|
티스토리 홈 이동 |
H
H
|
단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.