[React] 리액트 회원가입 및 로그인 컴포넌트 구성

[React] 리액트 설치방법 및 사용방법을 알아보자

설치와 사용방법을 어느정도 알았다면

 

① React 이름규칙

이름 규칙 : CM + 태그명
이름 규칙 : Join + CM + 태그명
이름 규칙 : Join + CM + 태그명 + ?

② CMButton.js

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  height: 40px;
  width: 300px;
  border-radius: 10px;
  border: 2px solid green;
  background-color: #03c75a;
  font-size: 16px;
  font-weight: 700;
`;

function CMButton(props) {
  return <StyledButton>{props.text}</StyledButton>;
}

export default CMButton;

③ CMInput.js

import React from 'react';
import styled from 'styled-components';

// 이름 규칙 : CM + 태그명
// 이름 규칙 : Join + CM + 태그명
// 이름 규칙 : Join + CM + 태그명 + ?

const StyledInput = styled.input`
  height: 40px;
  width: 300px;
  border-radius: 10px;
  font-size: 20px;
  border: 2px solid gray;
`;

function CMInput(props) {
  return <StyledInput placeholder={`Enter ${props.hint}`} type={props.hint} />;
}

export default CMInput;

※ 사용자가 입력하기전에 보기좋게 placeholder를 사용하기 위해선

hint값을 props 통해 값을 전달하여 사용한다.

 

※ 로그인 또는 회원가입을 할때 패스워드가 공개되면

보안상 문제가 있으므로 type={props.hint}로 값을 받아온다.

 

 

④ JoinPage.js

import React from 'react';
import CMInput from './components/CMInput';
import CMButton from './components/CMButton';

function JoinPage() {
  return (
    <div>
      <h1>회원가입 페이지</h1>
      <CMInput hint="username" type="name" />
      <br />
      <CMInput hint="password" type="password" />
      <br />

      <CMInput hint="email" />
      <br />
      <CMInput hint="tel" />
      <br />
      <CMButton text="회원가입" />
    </div>
  );
}

export default JoinPage;

⑤ LoginPage.js

import React from 'react';
import CMButton from './components/CMButton';
import CMInput from './components/CMInput';

function LoginPage() {
  return (
    <div>
      <h1>로그인 페이지</h1>
      <CMInput hint="username" />
      <br />
      <CMInput hint="password" type="text" />
      <br />
      <CMButton text={'로그인'} />
    </div>
  );
}

export default LoginPage;

⑥ App.js

// 1. css  연결
// 2. 바닐라 javascript 문법 - 커멜, 자동완성
// 3. 부트스트랩, 스타일 컴포넌트

import LoginPage from './pages/LoginPage';
import JoinPage from './pages/JoinPage';
import CMInput from './pages/components/CMInput';
import CMButton from './pages/components/CMButton';



function App() {
  var container = {
    backgroundColor: 'antiquewhite',
    width: '80%',
    margin: '0 auto',
  };

  return (
    <div style={container}>
      <LoginPage />
      <hr />
      <JoinPage />
      <hr />
    </div>
  );
}

export default App;