2023-07-25T07:28:24.486Z

0

이게 주석처리를 다 해도 rendering이 두 번 뜨는건가요..? 안에 내용을 login이랑 동일하게 해도 두 번 뜨나요??

0

로그인에서 useSWR을 빼도 2번이라면 이건 loadable과 page import의 차이인걸로 보이긴 하네요

0

다시 정리드리면 
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>
        아직 회원이 아니신가요?&nbsp;
        <Link to="/signup">회원가입</Link>
      </SignUpContainer>
    </LoginContainer>
  );
};

export default StockRecord;

0

해결이 어려울까요 ㅠ

이런 이슈는 나중에라도 해결을 꼭 해야하는거겠죠?

0

리렌더링이 된다해서 화면을 다시 그리는건 아니라서요. 근데 다른페이지는 한번인데 저기만 두번인게 이상할 뿐입니다. 로그인컴포넌트를 가져온 후 useSWR을 뺐는데도 2번이면 진짜 이상한 겁니다.