React :: shopping site 만들기 03

 

로그인 창 만들기

 

 

Navbar.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser } from '@fortawesome/free-regular-svg-icons';
import {faSearch} from '@fortawesome/free-solid-svg-icons';
import { useNavigate } from 'react-router-dom';

const Navbar = () => {
/* 코드의 재생산, 유지보수를 위해 메뉴의 배열을 만들어준다 */
const menuList = ['여성','Divided','남성','신생아/유아','아동','H&M HOME','Sale','지속가능성']
const navigate = useNavigate()
const goToLogin = () => {
    navigate('/login')
}

useNavigate를 사용하여 로그인 버튼을 클릭하면 로그인 창으로 이동하게 한다

 

 

리액트 부트스트랩에서 form 을 가져와서 로그인 창을 꾸며준다

 

필요한 코드를 들고 온다

 

이렇게 하고 새로고침 하면 에러가 뜬다

 

 

 

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

상단에 임포트를 걸어줘야 한다

 

 

 

 

Login.js

import React from 'react'
import { Container,Button, Form} from 'react-bootstrap';



const Login = () => {
  return (
    <Container>
      <Form>
      <Form.Group className="mb-3" controlId="formBasicEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control type="email" placeholder="Enter email" />
        <Form.Text className="text-muted">
          We'll never share your email with anyone else.
        </Form.Text>
      </Form.Group>

      <Form.Group className="mb-3" controlId="formBasicPassword">
        <Form.Label>Password</Form.Label>
        <Form.Control type="password" placeholder="Password" />
      </Form.Group>
      <Form.Group className="mb-3" controlId="formBasicCheckbox">
        <Form.Check type="checkbox" label="Check me out" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
    </Container>
  )
}

export default Login

부트스트랩의 <Container> 는 사이드로 퍼져 있는 컨텐츠를 중앙으로 보기 좋게 정렬 해준다

 

 

부트스트랩을 과도하게 사용하는 것은 좋지 않으나

사용한다면 틀을 가져다 쓰면서 내 스타일대로 바꿔주는 것이 좋을 것이다

 

 

---

 

로그인 기능 만들기

(프론트엔드에서 구현할 수 있는 기능만 구현할 거라서 백엔드가 다루는 영역까지는 안 갈 예정...)

 

 

 

App.js

  const [authenticate, setAuthenticate] = useState(false)

 

 

onSubmit

type="submit"

<Form> 태그의 사용은 submit 버튼을 누르면 새로고침이 된다 

로그인 하는 순간에 서버(백엔드)에 요청을 하면서 창이 새로고침이 되는 것이다

그냥 클릭 이벤트와는 다르다

 

따라서 버튼에 온클릭 이벤트를 주는 것이 아니라

폼태그에 onSubmit 이벤트를 줘야 한다

 

 

login.js

<Form onSubmit={loginUser}>

 

 

이때 페이지가 새로고침 되는 것을 막고자 할 때

form 자체에서 주는 이벤트가 있다

event.preventDefault();

리렌더가 되지 않도록 해주는 form 태그의 함수

페이지가 로그인 버튼을 눌러도 계속 새로고침 되는 것을 막아준다

 

 

로그인이 되면 로그인 초기값을 true로 바꿔준다

 

 

로그인 값을 수정하기 위해 props로 넘겨준다

 

 

 

 

function App() {
  const [authenticate, setAuthenticate] = useState(false); //로그인 초기값
  useEffect(()=>{
    console.log("확인용", authenticate);
  },[authenticate]) //계속 주시하게 한다

 

 

 

로그인 버튼을 계속 클릭하면 authenticate 의 값이 출력 된다

 

const Login = ({setAuthenticate}) => {
  const navigate = useNavigate();
  const loginUser = (event) => {
    event.preventDefault(); //기본 속성을 막아놓기
    console.log("뭐가 보일까요?");
    setAuthenticate(true); //로그인이 되면 true로 바꿔줌
    navigate('/') //메인페이지로 이동

이제 로그인 버튼을 누르면 메인페이지로 이동한다

 

 

 

---

 

 

 

상품 디테일을 눌렀으나 로그인이 안되어 있을 경우 로그인 페이지가 먼저 나오게 하기

 

 

새폴더를 만들어 주고 프라이빗 라우터를 만들기 위해 파일을 만들어 준다

authenticate 의 값이 true 인지 false 인지에 따라 로그인창과 메인페이지 창을 보여주게 한다

 

App.js

 <Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>} />

 

 

 

PrivateRoute.js

import React from 'react'

const PrivateRoute = ({authenticate}) => {
  return (
    <div>

    </div>
  )
}

export default PrivateRoute

 

const PrivateRoute = ({authenticate}) => {
  return authenticate === true ? <ProductDetail/> :  <Navigate to="/login"/>
}

로그인이 되었다면 상품페이지를 보여주고 로그인이 안된 상태라면

리다이렉트를 해줘서 로그인 창으로 보내준다 (navigate 사용해서 경로를 꺾어준다)

 

 

 

 

 

상품 페이지를 눌렀을 때 상품디테일 창으로 이동하게 한다

 

 

ProductCard.js

새창으로 가기 위해 useNavigate를 사용해주고

상품이미지에 클릭 이벤트를 준다

 

 

navigate(`/product/${item.id}`)

상품의 id 값으로 들어가게 된다

 

 

---

 

 

로그아웃 버튼을 누르면 로그아웃이 된다

 

authenticate, setAuthenticate

값을 navbar로 넘겨줘서 컨트롤 한다

 

 

App.js

<Navbar authenticate={authenticate} setAuthenticate={setAuthenticate}/>

 

 

Navbar.js

 

<div className='login-button'>
            {/* true 라면 로그인이 되어 있는상태이므로 상품페이지를 보여주고 로그아웃 글자로 바꿔줌*/}
            {authenticate === true ? (<div className='login-inner' onClick={()=> setAuthenticate(false)}>
                <FontAwesomeIcon icon={faUser} />
                <div className='login-text'>로그아웃</div>
            </div>) : (<div className='login-inner' onClick={()=>navigate('/login')}>
                <FontAwesomeIcon icon={faUser} />
                <div className='login-text'>로그인</div>
            </div>)}
</div>

 

콜백으로 onClick={()=> setAuthenticate(false)} 넣어준다

 

 

그럼 로그인을 하면 상품 디테일  페이지도 볼 수 있고 로그아웃으로 글자가 바뀌어 있다

로그아웃을 누르면 로그아웃 되고, 상품 디테일 페이지는 볼 수 없다

 

 

주의 사항

 

터미널에서 npm start 로 서버 하나만 띄우면 db에 담긴 이미지 파일들이 안보인다

따라서 터미널에서 db 서버를 연결해주고 npm start를 해줘야 페이지에 데이터들도 함께 보인다

 

 

json-server --watch db.json --port 3004

 

내가 지정해놓은 포트 번호를 똑같이 터미널에 입력해야 한다

로컬호스트 기본값은 3000 이기 때문에 다른 번호로 db 넘버를 지정할 것!