인프런 커뮤니티 질문&답변
작성한 질문수
페이지 접속시 다수 렌더링 이슈(slack환경으로 새 프로젝트 구축)
작성
·
273
·
수정됨
0
슬랙 프로젝트의 환경설정(웹팩 등)을 토대로 새 프로젝트를 만들고 있습니다.
페이지 접속시 console.log를 찍어보니 3번 찍히는 문제가 있습니다.
원인 및 해결방법을 모르겠어서 질문드립니다.
아래는 라우터 쪽입니다.
login과 signup은 loadble을 사용해서 그런지 1번만 console.log가 찍혔습니다.
아래 stockrecode에 해당하는 페이지가 3번 console.log 찍힙니다.
아래는 stockrecode 컴포넌트에 있는 코드입니다. 나머지는 다 주석처리하였습니다.
아래는 
로 이동시에 표시된 내용입니다. 
useSwr 사용 부분을 지우면 2번 표시됩니다.
<해본 방법>
strict-mode를 지우면 되는 글을 보아서 찾아봤는데
이미 strict-mode가 없는 상태였습니다.
2.웹팩에서 strict-mode를 false로 하면 되는 글을 보고 해보았는데
(관련 링크 https://www.sobyte.net/post/2021-09/webpack-strip-use-strict/)
아래처럼 @babel/plugin-transform-modules-commonjs 설치를 하고 적용해보았는데도
아래처럼 에러가 생겨서 이 방법으로도 해결하지 못하였습니다
답변주시는데 더 필요한 정보가 있으시면 말씀부탁드립니다.
꼭 해결하고 싶은데 제자리만 멤도는거 같아 질문 올립니다. ㅠ
답변 1
0
stockrecode의 다른 부분을 보지 않으면 모르겠습니다. useSWR말고도 많은 함수들(특히 useEffect나 setState류들)이 있는 것 아닌가요?
다시 정리드리면
1)useSwr쓰지 않고 console만 찍은 경우 2번 rendering
import React, { useCallback, useEffect, useState } from 'react';
import 'react-calendar/dist/Calendar.css';
//
const StockRecord = () => {
return <>{console.log('rendering')}</>;
};
export default StockRecord;
2)useSwr쓰고 console만 찍은 경우 3번 rendering
import { IUser } from '@typings/db';
import fetcher from '@utils/fetcher';
import React, { useCallback, useEffect, useState } from 'react';
import 'react-calendar/dist/Calendar.css';
import useSWR from 'swr';
const StockRecord = () => {
const {
data: userData,
error,
revalidate,
mutate,
} = useSWR<IUser | false>('/api/users', fetcher, {
dedupingInterval: 2000, // 2초
});
return <>{console.log('rendering')}</>;
};
export default StockRecord;
3)Loggin컴포넌트 코드 그대로 가져옴(useSwr사용) 2번 rendering
import React, { useCallback, useState } from 'react';
import {
Button,
ButtonGroup,
FillButton,
Form,
Header,
Input,
Label,
LoginContainer,
LoginContents,
SignUpContainer,
Error,
} from '../Login/styles';
// import { Link, Redirect, useNavigate } from 'react-router-dom';
// import { Link, useNavigate } from 'react-router-dom';
import useSWR from 'swr';
import useInput from '@hooks/useInput';
import fetcher from '@utils/fetcher';
import axios from 'axios';
import { Link, Navigate, useNavigate } from 'react-router-dom';
const StockRecord = () => {
const { data, error, revalidate, mutate } = useSWR('/api/users', fetcher);
const [logInError, setLogInError] = useState(false);
const [email, onChangeEmail] = useInput('');
const [password, onChangePassword] = useInput('');
const navigate = useNavigate();
const onSubmit = useCallback(
(e) => {
e.preventDefault();
setLogInError(false);
axios
.post(
'/api/users/login',
{ email, password },
{
withCredentials: true,
},
)
.then((response) => {
revalidate();
})
.catch((error) => {
setLogInError(error.response?.status === 401);
});
},
[email, password],
);
if (data === undefined) {
return <div>로딩중...</div>;
}
// if (data) {
// return <Navigate to="/stockrecord"></Navigate>;
// }
return (
<LoginContainer>
{console.log('rendering')}
<Header>주식 캘린더</Header>
<Form onSubmit={onSubmit}>
<Label>
<span>이메일 주소</span>
<div>
<Input type="email" id="email" name="email" value={email} onChange={onChangeEmail} />
</div>
</Label>
<Label>
<span>비밀번호</span>
<div>
<Input type="password" id="password" name="password" value={password} onChange={onChangePassword} />
</div>
{logInError && <Error>이메일과 비밀번호 조합이 일치하지 않습니다.</Error>}
</Label>
<FillButton type="submit" color="#60d6bf" marginBottom="20px">
로그인
</FillButton>
</Form>
<SignUpContainer>
아직 회원이 아니신가요?
<Link to="/signup">회원가입</Link>
</SignUpContainer>
</LoginContainer>
);
};
export default StockRecord;
리렌더링이 된다해서 화면을 다시 그리는건 아니라서요. 근데 다른페이지는 한번인데 저기만 두번인게 이상할 뿐입니다. 로그인컴포넌트를 가져온 후 useSWR을 뺐는데도 2번이면 진짜 이상한 겁니다.
이게 주석처리를 다 해도 rendering이 두 번 뜨는건가요..? 안에 내용을 login이랑 동일하게 해도 두 번 뜨나요??