2024-06-06 게시글을 업데이트 했음에도 페이지가 리렌더링 되지 않는 이유

해결방법

너무 간단한 문제였는데, 문제는 fetch를 받아 온 데이터를 posts 라는 state에 담아 다른 컴포넌트에서도 사용할 수 있게 props로 하위 컴포넌트에 전달했는데 이 과정에서 리렌더링이 발생할 만한 조건을 내려주지 않은 것이다.

 

즉 posts라는 상태의 상태 변경 함수를 같이 내려주지 않았다는 것이 문제다.

 

<Router posts={posts} setPosts={setPosts} users={users} signIn={signIn} setSignIn={setSignIn} signOut={signOut}/>

그렇다 보니 posts 상태가 변경되었음에도 홈 피드에서는 posts의 상태를 변경해줄 수 없었던 것이다.

그래서 새로고침을 직접 누르거나 아래 처럼 강제로 리로드를 해주어야 App 컴포넌트가 리렌더링 되면서 자식 컴포넌트들이 리렌더링이 그제서야 되는 문제가 발생했던 것이다.

// 기존 코드

navigate('/');
window.location.reload();
        
// 변경 코드

navigate('/', { state: { refresh: true } }); // 상태를 전달하여 홈으로 이동