Redux와 Context API와의 차이?
리덕스에는 미들웨어(Middelware)가 있음.
미들웨어에서 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행
미들웨어는 주로 비동기 작업을 처리 할 때 많이 사용
React 에서 Prop 전달의 흐름은 하향식이다.
컴포넌트 깊이가 깊어지면 prop전달의 과정이 번거로워지기 때문에 전역 Context안에 상태값을 명시하고 어디서든 그 Context에 접근 가능하도록 설정.
리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수
리덕스에서 미들웨어는 액션이 리듀서에서 처리되기 전에 우리가 원하는 작업들을 수행하는 역할을 합니다. 특히 미들웨어는 주로 비동기 작업을 처리할 때 많이 사용됩니다. 미들웨어에서는 특정 조건에 따라 액션이 무시되게 만들 수 있고, 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있으며, 액션이 디스패치되었을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 또한 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있고, 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수도 있습니다.
자바스크립트에서 비동기 처리란, 특정 코드의 실행이 끝날 때까지 기다리지 않고 다음 코드를 먼저 실행하는 것을 의미합니다. 비동기 처리를 가능하게 하는 방법 중 하나가 프로미스(Promise)입니다. 프로미스는 비동기 작업 결과를 나타내는 객체로, 비동기 작업이 성공적으로 완료되면 이행(Fulfilled) 상태가 되고, 실패하면 거부(Rejected) 상태가 됩니다. 프로미스를 사용하면 비동기 작업의 결과를 콜백 함수 대신 then() 메서드를 이용해 처리할 수 있습니다.
TDZ(Temporal Dead Zone)란 선언(Declaration)과 초기화(Initialization) 사이의 구간으로, 변수가 초기화되기 전까지는 해당 변수를 사용할 수 없는 상태를 말합니다. 즉, 변수가 선언되기 전에 변수에 접근하려고 하면 TDZ에 빠져 ReferenceError를 발생시킵니다. 이는 let과 const 키워드로 선언된 변수에만 적용되며, var 키워드로 선언된 변수는 TDZ에 빠지지 않습니다.
optional chaining은 객체의 속성에 접근할 때 해당 속성이 null 또는 undefined인 경우 TypeError를 발생시키지 않고 undefined를 반환하는 기능입니다. 이를 사용하면 코드의 가독성과 안정성을 높일 수 있습니다. optional chaining은 ES11(ECMAScript 2020)에서 새로 추가된 문법으로, ?. 연산자를 사용하여 구현됩니다. 예를 들어, obj?.prop1?.prop2?.method()와 같은 코드에서 obj, prop1, prop2가 null 또는 undefined인 경우, method()는 호출되지 않고 undefined를 반환합니다.
react-query에서는 쿼리를 캐시하고 다시 사용할 때, 각 쿼리를 구별하는 유일한 식별자인 'key'를 사용합니다. 이 key는 쿼리의 종류와 파라미터를 조합하여 생성됩니다. 따라서 같은 종류의 쿼리라도 파라미터가 다르면 다른 key를 가지게 됩니다.
React Query에서 쿼리 무효화는 캐시에서 오래된 데이터를 제거하고 서버에서 새로운 데이터를 가져오는 과정입니다. 이를 수동으로 트리거하기 위해서는 관련 쿼리 키를 전달하여 invalidateQueries 함수를 호출하거나, 쿼리를 정의할 때 refetchOnWindowFocus 또는 refetchInterval 옵션을 설정하여 자동으로 트리거할 수 있습니다. 또한 React Query는 useMutation 훅을 제공하는데, 이를 사용하여 서버에서 데이터를 업데이트하고 캐시에서 관련된 쿼리를 무효화할 수 있습니다.