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

Kim_Jaeho

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

리듀서 쪼개기

profile 페이지 (로그인 했을때 vs 로그인 안했을 때)

작성

285

제로초님 제가 redux이용해서 로그인 로그아웃 기능 구현하다가 profile페이지에서 자꾸 에러가 생겨서 질문드립니다.

제가 원하는 것은 profile페이지에 접속했을 때, login된 상태 (redux의 state중 isLoggedin이 true)면 profile페이지가 잘 나오고, logout된 상태(redux의 state중 isLoggedin이 false)면 profile페이지가 다른화면을 그리는 것을 원합니다.

처음 로그아웃된상태에서 /profile에 접속하면 로그아웃됐을때 profile화면이 잘 나오고,로그인상태에서 /profile에 접속하면 로그인됐을때 profile화면이 잘나옵니다.

허나, 로그인된상태에서 profile페이지에 접속해 있을 때, <Applayout>에 있는 로그아웃을 버튼을 클릭하면, 아래의 에러메세지가 나옵니다.

Unhandled Runtime Error

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

검색해본 결과 해당 에러는 hooks의 위치가 잘못되었을 때, 나타나는 에러인데, 제가 볼 땐, 현재 제 코드의 hooks위치에 문제가 없는 것으로 파악됩니다. 한번 봐주시면 감사하겠습니다.

( 첫 로드일때는 화면이 잘 나오는데, profile페이지에서 state값이 바뀌니까 에러메세지가 뜹니다...)

express redux react nodejs Next.js

퀴즈

61%나 틀려요. 한번 도전해보세요!

리덕스의 주요 목적은 무엇인가요?

React 컴포넌트 라이프사이클 관리

서버와의 비동기 통신 최적화

애플리케이션 상태 중앙 집중 관리

UI 렌더링 성능 향상

답변 2

Kim_Jaeho

질문자

AppLayout 코드입니다.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link'
import Image from 'next/image';
import { Menu, Input, Dropdown } from 'antd';
import {TwitterOutlined} from '@ant-design/icons';
import {useSelector, useDispatch} from "react-redux"

import { logoutAction } from '../reducers/user';

const { Search } = Input

const dropDownMenu = (dispatch)=>{return (
 <Menu>
<Menu.Item key="0">
<Link href='/profile'>
<a>Profile</a>
</Link>
</Menu.Item>
<Menu.Item key="1">
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
2nd menu item
</a>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="3">
<a href="/" onClick={(e)=>{e.preventDefault(); dispatch(logoutAction)}}>LOG OUT</a>
</Menu.Item>
</Menu>
);}

const AppLayout = ({children}) => {
 const isLoggedin = useSelector((state)=>state.user.isLoggedin);
 const dispatch = useDispatch();
 return (
 <>
<Menu mode="horizontal">
<Menu.Item>
<Link href='/'>
<a style={{fontSize:"2vw"}}>
<TwitterOutlined style={{fontSize: '21px', width:'40px', paddingLeft:'10px'}} />
</a>
</Link>
</Menu.Item>
<Menu.Item style={{ marginLeft:"20vw"}}>
<Search placeholder="input search text" allowClear style={{ width: "25vw", verticalAlign:"middle" }} />
</Menu.Item>

{isLoggedin
?
<Menu.Item style={{ marginLeft:"20vw"}}>
<div style={{height:"46px"}}>
<Dropdown overlay={dropDownMenu(dispatch)}>
<a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
<Image src="/img/groot2.jpg" alt="profileImg" width="44" height="44" />
</a>
</Dropdown>
</div>
</Menu.Item>
:
<>
<Menu.Item>
<Link href='/signIn'><a style={{fontSize:"2vw"}}>Sign In</a></Link>
</Menu.Item>
<Menu.Item>
<Link href='/signUp'><a style={{fontSize:"2vw",border:"solid 0.5px", borderRadius: '5px', padding: "5px"}}>Sign Up</a></Link>
</Menu.Item>
</>
}
</Menu>
{children}
</>
 );
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
};
export default AppLayout;

Kim_Jaeho

질문자

profile.js 코드입니다.

import React, { useEffect } from 'react';
import Head from 'next/head';
import { useSelector } from 'react-redux';

import AppLayout from '../components/appLayout';
import ProfileEditForm from '../components/ProfileEditForm';
import FollowList from '../components/FollowList';

const Profile = () => {
 console.log("profile 페이지 들어갑니다잉");
 let isLoggedin = useSelector((state)=>state.user.isLoggedin);
 let followerList;
 let followingList
 if(isLoggedin){
 followerList = useSelector((state)=>state.user.user.Followers);
 followingList = useSelector((state)=>state.user.user.Followings);
 }
 console.log(`로그인했나? ${isLoggedin}, 팔로워리스트${followerList}, 팔로잉리스트${followingList}`);

 return (
 <>
<Head>
<title>프로필 | NodeBird</title>
</Head>
<AppLayout>
{isLoggedin
?
<>
<ProfileEditForm/>
<FollowList header="Follower List" data={followerList}/>
<FollowList header="Following List" data={followingList}/>
</>
:
<div>pls login</div>
}
</AppLayout>
</>
 );
};


export default Profile;

Kim_Jaeho

작성한 질문수

전체 Q&A

질문하기