-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
pages폴더의 파일을 통해 components폴더의 컴포넌트들로 이동 할 경우
21.10.13 17:08 작성 조회수 268
0
안녕하세요 제로초님
제로초님 영상을 보며 조금씩 응용해가면서 개인 사이드프로젝트를 진행하고 있습니다!
하단 로그인 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;
폴더구조
답변을 작성해보세요.
답변 1