mobX를 처음 이용하는데 리렌더에 대해서 여쭈어봅니다.

Question

안녕하세요.이번에 mobX를 처음으로 이용하게 되었는데, rerender가 생각보다 너무 많이 일어나서 왜 그런건지아무리 공식문서를 읽어봐도 이해가 안되어 질문 드립니다.아래 코드는 공식문서에 있는 코드입니다.class Store { githubProjects &#61; [] state &#61; &#34;pending&#34; constructor() { makeAutoObservable(this, { fetchProjects: flow }) } // 별 모양은 제너레이터(generator) 함수입니다! *fetchProjects() { this.githubProjects &#61; [] this.state &#61; &#34;pending&#34; try { // await 대신 yield를 사용합니다. const projects &#61; yield fetchGithubProjectsSomehow() const filteredProjects &#61; somePreprocessing(projects) this.state &#61; &#34;done&#34; this.githubProjects &#61; filteredProjects } catch (error) { this.state &#61; &#34;error&#34; } } } const store &#61; new Store() const projects &#61; await flowResult(store.fetchProjects())만약 특정 컴포넌트에서 githubProjects 를 이용하고 있을 시, fetchProjects 함수를 호출하면해당 컴포넌트는 총 2번의 리렌더가 일어나는 것일까요?fetchProjects 함수 스코프 첫 번째 줄의 배열 초기화 ( this.githubProjects &#61; [] ) 때 1 번,값 할당 ( this.githubProjects &#61; filteredProjects ) 때 1 번 해서 총 2번으로 짐작되어 집니다.맞을까요?이렇게 질문 드리는 이유는..위와 비슷하게 제네레이터 함수를 생성 및 실행하여, 관찰하는 컴포넌트에 console.log(&#34;!!!!&#34;)를 찍어 리렌더 횟수를 알아보니,함수가 모두 종료되었을 때 리렌더 1번 되는 것이 아니라,함수 내에서 observable state 가 변할 때 ( 예시처럼 초기화, 값 할당 모두 ) 마다 리렌더가 됐습니다.(중단점을 찍어 콘솔에 !!!!가 찍히는지로 확인했습니다.)이런 게 mobX에서는 정상적인 것인지, 또한 함수 종료 시에만 리렌더가 되게 하는 별다른 방법이 있는지 궁금합니다.감사합니다.

mobX를 처음 이용하는데 리렌더에 대해서 여쭈어봅니다.

0개의 답변

Q&A 목록