pages폴더의 파일을 통해 components폴더의 컴포넌트들로 이동 할 경우
386
작성한 질문수 5
안녕하세요 제로초님
제로초님 영상을 보며 조금씩 응용해가면서 개인 사이드프로젝트를 진행하고 있습니다!
하단 로그인 navbar 를 클릭하여 pages의 login.js을 거쳐
LoginForm이라는 컴포넌트로 이동을 하고 있습니다! (마이페이지, 새글작성도 마찬가지)
제로초님의 방식은 AppLayout에서 컴포넌트에 바로 setIsLoggedIn props를 전달하는 방식인데 저는 AppLayout에 컴포넌트가 아닌 각각의 <Link>로 걸어놔서 props를 어떻게 효율적으로 전달해줘야할지 고민이 됩니다 ,,!
효율적인 해결방법이 생각나지않아서
const [isLoggedIn, setIsLoggedIn] = useState(false); 을
props 전달이 필요한 각 pages 마다 정의했고,
login페이지에선 로그인이 되어있지 않으면 LoginForm 컴포넌트,
되어있으면 MainPage로 이동하게끔 return 부분의 컴포넌트를 이런식으로
전달을 해줬습니다
<AppLayout>
{ isLoggedIn ? <MainPage setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>}
</AppLayout>
- 로그인 상태를 다른 페이지로 이동하면 유지하지 못함 (이건 서버가 없어서 그런건가 싶기도 해요..!)
- const [isLoggedIn, setIsLoggedIn] = useState(false);이 로그인, 마이페이지, 새글작성에 모두 중복되서 정의되어있음 (AppLayout컴포넌트에는 정의되어있지않음)
이런 문제점이 존재해서 혼자 해결해보려고 했지만 적당한 방법을 못찾아서 문의글을 남깁니다 ㅠㅠ
AppLayout.js
import React, { useState } from "react";
import PropTypes from "prop-types";
import Link from "next/link";
import { Row, Col } from "antd";
import styles from '../styles/styles.module.css';
import LoginForm from './LoginForm';
import MyPage from './MyPage';
const AppLayout = ({ children }) => {
return (
<>
<Link href="/">
<a><h1 className={styles.logo}>놀멍쉬멍
<img src="logoIcon.png" alt="logoImage" style={{width: '24px'}} /></h1>
</a>
</Link>
<div>{children}</div>
<Row className={styles.bottomNav}>
<Col xs={4}><Link href="/writePost"><a>새글작성</a></Link></Col>
<Col xs={4}><Link href="/community"><a>커뮤니티</a></Link></Col>
<Col xs={8}>
<Link href="/">
<a><img className={styles.centerNav} src='../icon.png'/></a>
</Link>
</Col>
<Col xs={4}><Link href="/myPage"><a>마이페이지</a></Link></Col>
<Col xs={4}><Link href="/login"><a>로그인</a></Link></Col>
</Row>
</>
);
};
AppLayout.propTypes = {
children: PropTypes.node.isRequired,
};
export default AppLayout;
pages/login.js
import React, {useState} from "react";
import AppLayout from "../components/AppLayout";
import Head from 'next/head';
import MainPage from '../components/MainPage';
import LoginForm from '../components/LoginForm';
const login = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<>
<Head>
<meta charSet="utf-8" />
<title>로그인 | 놀멍쉬멍</title>
</Head>
<AppLayout>
{ isLoggedIn ? <MainPage setIsLoggedIn={setIsLoggedIn}/> : <LoginForm setIsLoggedIn={setIsLoggedIn}/>}
</AppLayout>
</>
);
};
export default login;
components/LoginForm.js
import React, { useCallback, useState } from 'react';
import {Form, Input, Button} from 'antd';
import Link from 'next/link';
import styles from '../styles/login.module.css';
import styled from 'styled-components';
const LoginBtn = styled(Button)`
background-color: white;
border: 1px solid #857171;
&:hover {
background-color: #857171;
border: 1px solid #857171;
color: white;
}
`;
const LoginForm = ({setIsLoggedIn}) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onChangeEmail = useCallback((e) => {
setEmail(e.target.value);
},[]);
const onChangePassword = useCallback((e) => {
setPassword(e.target.value);
},[]);
const onSubmitBtn = useCallback(() => {
setIsLoggedIn(true);
console.log(email, password);
}, [email, password]);
return (
<>
<Form className={styles.LoginForm} onFinish={onSubmitBtn}>
<div>
<label htmlFor="user-email">이메일</label>
<br />
<Input name="user-email" value={email} onChange={onChangeEmail} required/>
</div>
<div>
<label htmlFor="user-password">비밀번호</label>
<br />
<Input
name="user-password"
type="password"
value={password}
onChange={onChangePassword}
required
/>
</div>
<div className={styles.buttonWrapper}>
<LoginBtn htmlType="submit" loading={false}>로그인</LoginBtn>
< br/>
<span>놀멍쉬멍이 처음이신가요?</span>
<Link href="/signup"><a>회원가입</a></Link>
</div>
</Form>
</>
);
};
export default LoginForm;
폴더구조
넥스트 버젼 질문
0
90
2
로그인시 401 Unauthorized 오류가 뜹니다
0
104
1
무한 스크롤 중 스크롤 튐 현상
0
191
1
특정 페이지 접근을 막고 싶을 때
0
116
2
createGlobalStyle의 위치와 영향범위
0
102
2
인라인 스타일 리렌더링 관련
0
97
2
vsc 에서 npm init 설치시 오류
0
157
2
nextjs 15버전 사용 가능할까요?
0
166
1
화면 새로고침 문의
0
129
1
RTK에서 draft, state 차이가 있나요?
0
160
2
Next 14 사용해도 될까요?
0
455
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
358
1
url 오류 질문있습니다
0
214
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
391
1
sudo certbot --nginx 에러
0
1293
2
Minified React error 콘솔에러 (hydrate)
0
477
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
255
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
337
1
npm run build 에러
0
525
1
front 서버 npm run build 중에 발생한 에러들
0
398
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
350
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
290
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
249
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
206
1