assign이라는 말 그대로 “할당”을 하는 역할의 메서드.
Object.assign(target, sources)
이렇게 두개의 파라미터를 갖고, 앞의 target에 sources의 프로퍼티를 복사해 붙여 넣는 메서드다.
target과 sources가 같은 키값을 갖는 프로퍼티가 있다면, sources로 덮어써진다.리덕스의 reducer에서 기존 state 객체에 payload를 적용하는 로직을 작성할 때,
각 객체의 키에 접근하여 직접 할당하는 것 대신 Object.assign()을 사용해볼 수 있다.
이 때, 중첩된 객체에서는 사용하기 어렵다!
목적: 비동기를 성공한 케이스에 대한 로직, 비동기 진행중인 상태에 대한 로직, 비동기 실패한 상태에 대한 로직을 각각 분리하기 위함. (관심사 분리)
Suspense: React 18부터 공식 지원(버전 16에서 실험적으로 시작) 비동기 함수가 실행이 되면 자식 컴포넌트의 렌더링이 우선 멈추고, 로딩중일 때 노출할 UI를 보여준다. 이후 비동기 함수가 끝나면 자식 컴포넌트를 렌더링 함.
Error Boundary: 역시나 React에서 지원하며, 클래스형 컴포넌트로 구현되어 있음. 비동기 함수에서 에러가 발생한 경우 노출할 UI를 핸들링한다.
There is currently no way to write an error boundary as a function component. However, you don’t have to write the error boundary class yourself. For example, you can use react-error-boundary instead. 아직까지 Error Boundary를 함수형 컴포넌트로 작성할 수 없다고 한다.
React에서 제공하는 두 컴포넌트 모두 fallback을 받으며, 이 fallback으로 각 로딩/에러 케이스에서 보여줄 컴포넌트를 내려주면 된다.
이 두가지 기능을 함께 사용할 수 있는 Suspensive 라이브러리도 추가 학습할 예정 ;)
리액트 쿼리로 받아온 데이터를 state의 초기 데이터로 사용해야 한다. 이 state는 이후 데이터와는 관계가 없고, 단순 초기값으로써만 필요!
이 경우 쿼리의 onSuccess의 콜백으로 setState를 넣어주어야 하고, 이는 리액트 쿼리에서도 매우 지양하는 방식이다.
그래서 데이터 페칭이 완료된 시점에서 데이터를 넘기도록 리팩토링 하는 것이 목표!