인프런 커뮤니티 질문&답변

작성한 질문수

페이지 접속시 다수 렌더링 이슈(slack환경으로 새 프로젝트 구축)

작성

194

수정됨

슬랙 프로젝트의 환경설정(웹팩 등)을 토대로 새로 프로젝트를 만들고 있는데

console.log를 찍어보니 3번 찍히는 걸 발견해서요. 3번 렌더링이 되는 거 같은데

원인 및 해결방법을 모르겠어서 질문드려요.

아래는 라우터 쪽입니다.

login과 signup은 loadble을 사용해서 1번만 렌더링이 되는 걸 console.log로 확인하였습니다.

stockrecode에 해당하는 페이지가 3번 렌더링이 되고 있습니다.

아래는 stockrecode 컴포넌트에 있는 코드입니다. 나머지는 다 주석처리하였습니다.

아래는

로 이동시에 표시된 내용입니다. useSwr부분을 지우면 2번 표시됩니다.

해본 방법으로는 strict-mode를 지우면 되는 글을 보아서 찾아봤는데

이미 strict-mode가 없는 상태였습니다.

웹팩에서 strict-mode를 false로 하면 되는 글을 보고 해보았는데

아래처럼 @babel/plugin-transform-modules-commonjs 설치를 하고 적용해보았는데도

아래처럼 에러가 생겨서 이 방법으로도 해결하지 못하였습니다

답변주시는데 더 필요한 정보가 있으시면 말씀부탁드립니다.

꼭 해결하고 싶은데 제자리만 멤도는거 같아 질문 올립니다. ㅠ

답변 1

안녕하세요, 인프런 AI 인턴이에요. 다수 렌더링 이슈에 대해 질문하셨네요.

다수 렌더링이 발생하는 원인은 다양할 수 있습니다. 하지만 주로 성능 최적화 관련 이슈인 경우가 많습니다. 이런 경우 일반적으로 다음과 같은 접근 방법을 고려해볼 수 있어요.

불필요한 리렌더링 확인: React 개발자 도구를 사용해서 해당 컴포넌트가 어떤 상황에서 리렌더링되는지 확인해보세요. 상태나 속성이 변경되어야 할 때만 리렌더링되도록 최적화할 수 있습니다.
메모이제이션 사용: React.memo()를 사용하여 컴포넌트를 메모이제이션 할 수 있습니다. 이렇게 하면 속성이 변경되지 않는 한 컴포넌트가 다시 렌더링되지 않습니다.
불변 속성 사용: 컴포넌트의 속성을 변경하지 않고, 새로운 객체를 생성하여 전달하는 방식으로 개발을 해보세요. 불변 속성을 사용하면 React가 변경사항을 더 빨리 감지할 수 있습니다.
SWR 설정 확인: SWR 설정에서 잘못된 부분이 있는지 확인해보세요. 캐시 정책이나 재시도 로직 등이 원하는 대로 동작하고 있는지 검토할 필요가 있습니다.
슬랙과 관련된 설정 확인: 슬랙 프로젝트와 관련된 설정이 올바르게 구성되어 있는지 확인해보세요. 웹팩 설정이나 다른 환경 설정에 문제가 있을 수 있습니다.

또한, 웹팩에서 strict-mode와 관련된 설정을 변경하려고 했지만 에러가 발생한 것 같습니다. 이 부분은 웹팩 및 babel 설정에 대한 자세한 내용을 확인해야 해서 더 많은 정보가 필요할 것 같아요.

더욱 정확한 도움을 드리기 위해서는 코드나 설정 파일 등의 자세한 내용을 제공해주시면 더 자세한 답변을 드릴 수 있을 것 같습니다. 감사합니다.

작성한 질문수