[리액트 실습] 로그인 화면 구성 1 (컴포넌트 뼈대 잡기)

 *유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 

 

[리액트 실습] 로그인 화면 만들기 0 (React Hooks - useEffect, useState )

이번 포스팅에서는 Login컴포넌트의 뼈대를 잡아보려한다. 

useState, useEffect와 같은 함수는 쓰이지 않을 예정이며 리액트의 CSS, HTML의 기초적인 부분에 대해 다루어볼 것이다. 

---

1. 뼈대잡기

 

우선 create-react-app을 활용하여 login-review 디렉토리를 만들어주었다.

(복습 겸 조금 더 정확한 포스팅 작성을 위해 한번 더 만들어보았다. 그렇기에 0번에서 보았던 화면과 살짝 달라지는 부분이 있을 수도 있다.) 

 

로그인 컴포넌트를 만들어주고 ~ 

App.js에 렌더링 해주고 잘 렌더링 되는 지 확인 해준다.

이렇게 뜨면 잘 렌더링 된 것을 확인할 수 있다 ~ !

 

그럼 본격적으로 뼈대를 만들어보자

아래 앱 사진을 통해 로그인 화면의 요소를 참고해보자. 

제목, 이메일, 비밀번호 주소 입력과 각각의 input창이 있고 확인 버튼이 있음을 알 수 있다. 그리고 올바르지 않은 형태의 메일과 비밀번호를 입력하면 띄워주는 error메세지도 요소에 포함이 된다!

 

Login.jsx

import React from 'react'

export default function Login() {
  return (
    <div className = "page">
        {/* Title Wrap*/}
        <div className = "titleWrap">
            이메일과 비밀번호를<br/> 입력하세요
        </div>

        {/* contentWrap - 이메일 입력 */}
        <div className = "contentWrap">
            <div className="inputTitle">
                이메일 주소
            </div>
            <div className="inputWrap">
                <input></input>
            </div>
        </div>

        {/* errror 메세지 띄우기  */}
        <div className = "errorMessageWrap">
            <div>올바른 이메일 주소를 입력해주세요</div>

        </div>

        <div className = "contentWrap">
            <div className="inputTitle">
                비밀번호
            </div>
            <div className="inputWrap">
                <input></input>
            </div>
        </div>

        {/* errror 메세지 띄우기  */}
        <div className = "errorMessageWrap">
            <div> 영문, 숫자, 특수문자 포함 8자 이상 입력해주세요</div>

        </div>

        <div>
            <button>
                확인</button>
        </div>
        
    </div>
  )
}

이제 필요한 요소는 넣었고 CSS와 리액트 함수를 통해 앱을 만들어 줄 것이다 ~ ~

---

2. CSS로 꾸미기 

 

사전작업 

src폴더에 index.css 파일을 추가해주고 index.js파일에 import './index.css'; 를 통해 파일을 import 해준다 ~~ ! 

(사실 기초적인 내용인데 안하면 필자가 까먹어서 넣어보았다. 기본일수록 더 확실하게 .. )

 

Css태그에 관한 설명은 HTML/CSS 포스팅에서 자세하게 다루어보도록 하겠다 ! (리액트에서 다룰 분야는 아닌 것 같다 ~~ )

 

 

indes.css

.page {
    position : absolute ;
    top:0;
    bottom : 0;
    width: 100% ;
    max-width : 500px;
    padding: 0 20px;


    left:50%;
    transform : translate(-50%,0);

    background-color: #F7F7F7;

    overflow : hidden;

    display: flex;
    flex-direction: column;
}

.titleWrap {
    margin-top: 87px;
    font-size: 26px;
    font-weight: 700;

    color: #262626;

}


.contentWrap{
    margin-top : 26px;
    flex: 1;
}

.inputTitle{
    font-size : 12px;
    font-weight : 600;
    color :#262626;
}

.inputWrap {
    display:flex;
    border-radius: 8px;
    padding: 16px;
    margin-top:8px;
    background-color: white;
    border: 1px solid #e2e0c0;

}

.inputWrap:focus-within{
    border:1px solid #9e30f4;

}

.input{
    width:100%;
    outline:none;
    border:none;
    height: 17px;
    font-size: 14px;
    font-weight: 400;
}

.input::placeholder{
    color : #dadada;
}

.errorMessageWrap{
    margin-top: 8px;
    color:#ef0000;
    font-size: 12px;

}

.bottomButton{
    width:100%;
    height:48px;
    border:none;
    font-weight: 700;
    background-color: #9e30f4;
    border-radius: 64px;
    color:white;
    cursor:pointer;
}


.bottomButton:disabled{
    background-color: #dadada;
    color:white;
}

 

 

여기까지 해주면 아직 기능은 없는 껍데기가 완성된다 ~~ ! 

이제 이 껍데기에 리액트 hooks를 통해서 기능을 넣어줄 예정이다. 

다음 포스팅에서는 0장에서 다루었던 hooks가 어떻게 리액트 앱에서 실제 사용되는지를 볼 수 있을 것이다 !