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

Question

제로초님 제가 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값이 바뀌니까 에러메세지가 뜹니다...)

Kim_Jaeho · Answer

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 < Menu.Item key = " 1 " > < a target = " _blank " rel = " noopener noreferrer " href = " https://www.aliyun.com " > 2nd menu item < Menu.Divider /> < Menu.Item key = " 3 " > < a href = " / " onClick ={( e ) => { e . preventDefault () ; dispatch ( logoutAction ) }} > LOG OUT ) ;} 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 ' }} /> < Menu.Item style ={{ marginLeft : " 20vw " }} > < Search placeholder = " input search text " allowClear style ={{ width : " 25vw " , verticalAlign : " middle " }} /> { 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 " /> : <> < Menu.Item > < Link href = ' /signIn ' >< a style ={{ fontSize : " 2vw " }} > Sign In < Menu.Item > < Link href = ' /signUp ' >< a style ={{ fontSize : " 2vw " , border : " solid 0.5px " , borderRadius : ' 5px ' , padding : " 5px " }} > Sign Up } { children } ) ; }; AppLayout . propTypes = { children : PropTypes . node . isRequired , }; export default AppLayout ;

Kim_Jaeho · Answer

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 < AppLayout > { isLoggedin ? <> < ProfileEditForm /> < FollowList header = " Follower List " data ={ followerList } /> < FollowList header = " Following List " data ={ followingList } /> : < div > pls login } ) ; }; export default Profile ;