🌞 2/15 내배캠 React 76일차

[최종 프로젝트 중 만난 에러들]

 

Next.js의 랜더링이 두번되는 이슈

데이터에 접근을 했을 때 항상 랜더링이 두번 되었다. 그러다보니 우리가 원하는 counter숫자도 2개씩 증가하였다. 모두가 2개씩 증가하면 사실은 별 상관없긴 하지만 해결하는 방법이 있을까 해서 찾아보았다.

ReactStrictMode라는 것이 있었다. NExt.js 만의 것이 아닌 React에도 <React.StrictMode>의 형태로 나타나 있는 것이었다.

그럼 ReactStrictMode란 무엇일까?

쉽게 말해 우리가 만드는 application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다.

사실 Next.js에서는 이 기능을 없애는걸 추천하지 않느다고 한다. 프로젝트에 큰 영향이 없다면 그대로 놔둬도 될 것 같다.

방법

next.config.js 파일에 간다

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
}

해당 파일에서 reactStricMode를 true → false로 변경하고, 서버를 끈 후, npm run dev를 한다면 깨끗하게 한개만 찍히는 것을 볼 수 있을 것이다.

 

---

 

카운팅을 하기 위해 mutation을 이용하여 변경된 값을 넘겨주었을 때, query값이 새로고침시 undefined로 바뀌는 에러가 있었다.

SSR방식을 사용하여 문제를 해결 했다 getServerSideProps

export async function getServerSideProps(context: { params: any }) {
  const { params } = context;
  const { id }: any = params;
  return {
    props: {
      id: id,
    },
  };
}

export로 서버에서 id값을 보내 준 후 컴포넌트에서 id를 받고, useEffect에 그 id값을 mutation을 통해 데이터를 넘겨주니, 랜더링을 해도 query값이 undefined되지 않았다.

 

const Post = ({ id }: any) => {

const { mutate: countMutate } = useMutation(postCounter, {
    onSuccess: () => {
      queryClient.invalidateQueries('detailData');
    },
  });

  //* 변화된 counting 값 인지
  useEffect(() => {
    countMutate(id);
    console.log('id:', id);
  }, []);
  
  return (
  ...
  )
  }