230810) 컴포넌트와 컴포넌트 사이에 전역 데이터를 주고 받을 때, 한 컴포넌트만 랜더링되어 보이는 듯한 현상 해결 방법

나타난 현상

 

1. Jotai를 이용해

  const [selectedPost, setSelectedPost] = useAtom(selectedPostAtom);

라는 Atom을 만들었다. 이후 이 selectedPost라고 하는 Atom을 SavedPage.jsx와 Card.jsx에서 사용하였다.

 

2. SavedPage.jsx 안에 Card.jsx이 있고, Card.jsx 안에 존재하는 함수를 작동하면 setSelectedPost가 실행되며 selectedPost가 변경된다. 따라서 selectedPostAtom을 구독하고 있는 모든 컴포넌트에서 랜더링이 일어나야 한다.

 

3. 하지만 Card.jsx안에서만 랜더링이 일어나고, SavedPage.jsx는 랜더링이 일어나지 않아 아무런 변화가 없는 상황이었다.

 

이에는 크게 두 가지 문제가 있었다.

 

파악한 문제 및 해결 방법

 

1. Card.jsx에서 랜더링이 되어도 SavedPage.jsx에서는 랜더링이 일어나지 않았다.

-  SavedPage.jsx안에 console.log를 찍어도 Card.jsx가 랜더링 될 때 콘솔이 찍히지 않았기에 랜더링되지 않음을 알 수 있었다.

=> SavedPage.jsx 안에는

const [selectedPost, setSelectedPost] = useAtom(selectedPostAtom);

 형태가 아니라

const setSelectedPost = useSetAtom(selectedPostAtom);

형태로 작성해 두었는데, 이를 위의 useAtom으로 변경하니 해당문제가 해결되어 Card.jsx에 랜더링이 일어날 때 콘솔이 잘 찍혀 나왔다.

 

 

2. 하지만 여전히 화면에 아무런 변화가 없었다.

- savedPage.jsx의 화면에서는 db.json으로부터 데이터를 받고, 이를 map으로 뿌려주고 있는 상황이었다.

- 따라서 화면에 변화가 일어나려면 단순히 랜더링이 되는 것뿐만 아니라, db.json의 데이터가 다시 불러와져야 했다.

 

=> SavedPage.jsx의 내부에서는 useEffect 내의 fetchPosts라는 함수를 통해 데이터를 불러오고 있었는데, useEffect의 의존성배열이 비워져 있었던 상태였다. 따라서 fetchPost는 화면이 처음 랜더링 될 때에만 작동이 되었다.

useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await axios.get('http://localhost:4000/test');
      setData(data);
    };
    fetchPosts();
  }, []);

따라서 의존성 배열 안에 아래와 같이 selectedPost를 넣어 줌으로, selectedPost에 변화가 있을 때마다 fetchPosts가 실행되도록 만들었다. 이후로는 모든 동작이 정상적으로 잘 작동하였다!

 

useEffect(() => {
    const fetchPosts = async () => {
      const { data } = await axios.get('http://localhost:4000/test');
      setData(data);
    };
    fetchPosts();
  }, [selectedPost]);

 

오늘도 잘 해냈다!