[React] 로그인,회원가입 페이지 만들기

* 기본 뼈대코드

import React from "react";

import styled from "styled-components";

 

const Login = (props) => {

 

       return (

         <React.Fragment>

 

         </React.Fragment>

       )

}

 

Login.defaultProps = {

  

}

export default Login;

 

* 리액트에서 함수형 컴포넌트 사용을 권고하고 있다.

 

1. 기획서 내 필요한 내용들을 먼저 파악해보자.

  return (

         <React.Fragment>

              제목 

              아이디

              패스워드

              버튼 

         </React.Fragment>

       );

 

2. 페이지에서 확인할 수 있도록 App.js 에 라우트 경로 잡아주자.

 

import Login from "../pages/Login";

...

<Route path="/login" exact component={Login} />

 

 

3. 로그인 페이지에 필요한 최소단위 컴포넌트(elements) 만들어보자.

 

- input.js  (아이디/패스워드 입력박스)

- button.js (로그인 버튼)

 

* 기본 뼈대코드

import React from "react";

import styled from "styled-components";

 

const Input = (props) => {

 

       return (

         <React.Fragment>

 

         </React.Fragment>

       )

}

 

Input.defaultProps = {

  

}

export default Input;

* 모든 컴포넌트를 만들때 기본 뼈대를 토대로 하나씩 만들어가는 습관을 가지자.

 

- defaultProps 정하기

Input.defaultProps = {

multiLine: false,

label: false,

placeholder: "텍스트를 입력해주세요.",

type: "text",

value: "",

_onChange: () => {},

//변하는 텍스트 값을 부모가 알고싶어할것으로 그 값을 리덕스에 저장하거나 사용하기위해 콜백함수를 받아와야한다. 

};

 

- P 태그는 기본적으로 마진을 가지고 있으므로, Text.js에서 margin 또한 스타일로 가져올 수 있도록 추가해주자.

Text.defaultProps = {

children: null,

bold: false,

color: "#222831",

size: "14px",

margin: false,

// 기본적으로 false로 두고 styled에 마진이 있는지 없는지 체크해서 적용될 수 있도록 해준다. 

};

 

const P = styled.p`

color: ${(props) => props.color};

font-size: ${(props) => props.size};

font-weight: ${(props) => (props.bold? "600" : "400")};

${(props) => (props.margin? `margin: ${props.margin};` : '')}

`;

 

- 화면 뷰 그리기

return (

<React.Fragment>

<Grid>

{label && <Text margin="0px">{label}</Text>}

<ElInput type={type} placeholder={placeholder} onChange={_onChange} />

</Grid>

</React.Fragment>

);

};

 

- 스타일 잡기 

const ElInput = styled.input`

border: 1px solid #212121;

width: 100%;

padding: 12px 4px;

box-sizing: border-box;

`;

 

 

* 회원가입 완성코드

기본뼈대코드를 참고하여 여러 페이지들을 만들어보는게 좋을 것 같다. 

import React from "react";
import { Text, Input, Grid, Button } from "../elements";


const Signup = (props) => {

    return (
      <React.Fragment>
        <Grid padding="16px">
          <Text size="32px" bold>
            회원가입
          </Text>
          <Grid padding="16px 0px">
            <Input
              label="아이디"
              placeholder="아이디를 입력해주세요!"
              _onChange={() => {
                console.log("아이디 입력완료!");
              }}
            />
          </Grid>
          <Grid padding="16px 0px">
            <Input
              label="닉네임"
              placeholder="닉네임을 입력해주세요!"
              _onChange={() => {
                console.log("닉네임 입력완료!");
              }}
            />
          </Grid>
          <Grid padding="16px 0px">
            <Input
              label="비밀번호"
              placeholder="비밀번호를 입력해주세요!"
              _onChange={() => {
                console.log("비밀번호 입력완료!");
              }}
            />
          </Grid>
          <Grid padding="16px 0px">
            <Input
              label="비밀번호 확인"
              placeholder="비밀번호를 다시 입력해주세요!"
              _onChange={() => {
                console.log("비밀번호 확인완료!");
              }}
            />
          </Grid>
          <Button
            text="회원가입하기"
            _onClick={() => {
              console.log("회원가입 완료");
            }}
          ></Button>
        </Grid>
      </React.Fragment>
    );
}
 
export default Signup;

 

 

* Header.js 공통 상위 메뉴 

import React from "react";
import { Grid, Text, Button } from '../elements';


const Header = (props) => {
    return (
      <React.Fragment>
        <Grid is_flex padding="4px 16px">
          <Grid>
            <Text margin="0px" size="24px" bold>
              하이
            </Text>
          </Grid>

          <Grid is_flex>
            <Button text="로그인"></Button>
            <Button text="회원가입"></Button> 
          </Grid>
        </Grid>
      </React.Fragment>
    );
}

Header.defaultProps = {

}

export default Header;