loading의 상태 변화에 따라 컴포넌트 렌더링시 무한렌더링이 발생합니다.

안녕하세요. 도움을 요청할 데가 없어서 혹시 원인을 알고 계실까하여 글을 작성합니다.

우선 nodebirdSNS 가 아닌 개인 프로젝트에서 발생한 문제라는 점 양해 부탁드립니다.

공공API를 사용하여 데이터를 불러오기 위해 Redux Toolkit 을 사용하여 extraReducers로
pending, fulfilled, rejected 일 때 각각 loading의 상태를 변경시켜준 후
loading이 true일 때는 <Loader /> 컴포넌트를, false 일때는 데이터를 그려줄 컴포넌트가 열리도록 코드를 짰습니다.

pending 일 때, loading = true
fulfilled 일 때, loading = false

값이 잘 들어갔고 데이터도 잘 받아와지는데..
문제는 이렇게 loading 을 보여주려고만 하면 무한렌더링에 걸려버립니다...ㅠ ㅠ
분명 fulfilled일 때 false로 변경되었는데도 말이죠... 삼항연산자를 제외하고 실행시켜보면 원하는 대로 데이터를 불러올 때 딱 한번만 렌더링이 되는 것을 확인했습니다. 값은 잘 들어가놓고 왜 로딩의 값에 따라 컴포넌트를 보여주려고만 하면 무한렌더링에 걸리는 지 뭐가 문제인 건지 조금만 알려주시면 정말 감사할 것 같습니다 ㅠㅠ 아무리 찾아봐도 비슷한 케이스를 찾지 못했고, 많은 블로그와 유투브 영상을 참고해도 원인을 알 수가 없었습니다..

[삼항연산자 추가 시]

[삼항연산자 제거시]

해당 코드는 이렇습니다.

[API]

[Reducer]

[Component]