78일차 TIL( cs - study / 발표 정리)

컴포넌트가 생성되고 업데이트 되는 과정을 관리하는 방법이며 라이프사이클은 컴포넌트가 화면에 나타나고 사라지는 동안 일어나는 단계를 설명한다.

 

마운트 -

- constructor: 컴포넌트가 생성될 때 호출되어 초기 설정을 수행 !

- Render: ui를 렌더링 해줌

- componentDidMount : 컴포넌트가 화면에 나타난 후 딱 한 번 호출되며 주로 외부 데이터 가져오기 등 초기화 작업을 수행

업데이트 - shouldComponentUpdate :컴포넌트가 업데이트되기 전에 호출되며, 업데이트가 필요한지 여부를 결정

 

언마운트(Unmounting):

• render: 컴포넌트의 새 UI를 렌더
• - componentDidUpdate : 컴포넌트가 업데이트된 후 호출되며, 업데이트 이후의 작업을 처리

• : 컴포넌트가 화면에서 사라지기 전에 호출되며, 리소스 해제 및 정리 작업을 수행

라이프사이클 메서드를 사용하여 컴포넌트가 생성되고 업데이트 되는 과정을 제어하고, 데이터 흐름을 관리하며 UI와 상호작용한다. 각 메서드는 특정 시점에 호출되므로, 필요한 작업을 적절한 시점에 수행할 수 있다.

최근 버전의 리액트에서는 클래스 컴포넌트의 라이프사이클 메서드 대신 함수 컴포넌트와 훅(Hook)을 사용하는 추세가 있습니다. 함수 컴포넌트와 훅을 사용하면 더 간결하고 가독성이 좋은 코드를 작성할 수 있으며, 라이프사이클 관리가 더 간단해진다.

 

 

about useQuery -

 

1. Remount

컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신합니다.

refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true입니다.

 

2. Window refocus

윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신합니다.

refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true입니다.

 

3. Network reconnect

네트워크가 다시 연결되면, 새로운 데이터를 갱신합니다.

refetchOnReconnect 옵션을 통해 설정할 수 있으며, default 값은 true입니다.

 

 

그 밖에 주기적으로 데이터를 새로운 데이터를 갱신할 수 있는 refetchInterval, refetchIntervalInBackground 등의 옵션을 제공하고 있습니다.

 

useQuery

useQuery를 이용해서 데이터를 fetching 할 수 있습니다.

HTTP GET 요청을 할 때, 주로 사용합니다.

 

useQuery는 queryKey, queryFn, options를 이용해서 코드를 작성할 수 있습니다.

 

queryKey는 Query를 Unique하게 지칭할 배열,

queryFn은 Promise를 리턴하는 함수,

options는 다양한 옵션들을 전달할 수 있는 객체

 

useMutation

서버의 데이터를 변경할 때 사용합니다.

HTTP POST, PUT, DELETE 요청을 사용할 수 있습니다.

 

mutationFn은 queryFn처럼 Promise를 리턴하는 비동기 함수입니다.

파라미터를 전달받을 수 있습니다.

 

mutationFn 파라미터는 useMutation의 리턴값인 mutate 함수의 인자로 전달됩니다.

mutationFn에서는 어떻게 동작할지 정의만 하고, mutate 함수를 통해 나중에 실행되는 것입니다.

 

queryClient.invalidQueries

queryClient 객체는 다양한 메소드들을 제공하고 있는데요.

useQueryClient hook 함수를 통해 가져올 수 있습니다.

 

많은 메소드 중에서, invalidQueries 메소드는 자주 쓰입니다.

invalidQueries는 전달받은 queryKey의 Query를 invalid 처리하고, 해당 Query가 active할 경우 다시 refetch 해주는데요.

특정 API 호출 후, 데이터를 갱신하고 싶을 때 사용할 수 있습니다.