몇년 전...썩혀 두었던 프로젝트 하나를 열어본다.
그동안 찍어 놓은 사진들을 앨범집으로 보여주는 사이트를 개발해볼까하는 생각에 취미로 개발하다가 말은 프로젝트가 있었다...!
이 프로젝트를 썩히긴 아까워서 지금 배우고 있는 리액트로 변환해볼까? 란 생각이 들었다. 그래서 지금 이렇게 개발 과정을 기록해본다.
우선 나의 구상은 로그인 화면에서 로그인 성공 후까지 모두 SPA 형태로 보여주는 걸로 생각하고 있다.
지금 기존의 프로젝트는 HTML과 CSS, jQuery로 구성하고 있다.
기존 프로젝트
HTML 파일
<!DOCTYPE html> <html lang="ko"> <head> <title>추억을 로그인</title> <meta charset="utf-8"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="css/index.css" rel="stylesheet"> </head> <body> <section class="login-form"> <h1>추억을 로그인</h1> <form action=""> <div class="int-area"> <input type="text" name="id", id="name-input" autocomplete="off" required> <label id="id" for="id">Username</label> </div> <div class="int-area"> <input type="password" name="password", id="password-input" autocomplete="off" required> <label id="pw" for="pw">Password</label> </div> </form> <button id="btn-login" type="submit">LOGIN</button> <div id="hint"><a href="hint.html" target='_blank'>Click to get a hint</a></div> </section> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="js/loginPage.js"></script> </body> </html>
JavaScript 파일
//ID와 PASSWORD를 둘 다 입력했을 때 나타나는 이벤트 $('#name-input').on('input', checkInput); $('#password-input').on('input', checkInput); function checkInput() { let id = $('#name-input').val(); let password = $('#password-input').val(); let btnLogin = $('#btn-login'); if(id === '' || password === '') btnLogin.removeClass('on'); else btnLogin.addClass('on'); } //로그인을 한 후 다음 페이지로 넘어감 $('#btn-login').on('click', login); $(window).on('keypress', function(e) { if(e.keyCode === 13) // 13: 엔터키 login(); }); function login() { let id = $('#name-input').val(); let password = $('#password-input').val(); if(id === '생략' && password === '생략') window.open('https://home-commemoration.netlify.app/'); else if(id !== '' || password !== '') alert('아이디 또는 패스워드가 잘못 입력 되었습니다.'); }
위의 코드를 실행한 결과 화면이다.
자, 우선 HTML의 뼈대를 리액트 프로젝트로 변환해보자!
import React from 'react';
import '../style/LoginBox.css';
const LoginBox = () => {
return (
<>
<section className="login-form">
<h1>추억을 로그인</h1>
<form action="">
<div className="int-area">
<input
type="text"
name="id"
id="name-input"
required />
<label id="id">Username</label>
</div>
<div className="int-area">
<input
type="password"
name="password"
id="password-input"
required
/>
<label id="pw">Password</label>
</div>
</form>
<button id="btn-login" type="submit">LOGIN</button>
<div id="hint">
<a href="hint.html" target='_blank'>Click to get a hint</a>
</div>
</section>
</>
)
};
export default LoginBox;뼈대는 LoginBox 컴포넌트에 코드를 작성하였고,
이제 이 컴포넌트를 렌더링하기 위해 App.js에다 LoginBox 컴포넌트를 불러오자.
import React from 'react';
import LoginBox from './Component/LoginBox';
const App = () => {
return (
<>
<LoginBox />
</>
);
}
export default App;이렇게까지 하면 기존의 프로젝트를 실행한 결과와 똑같이 결과가 나온다.
위에서 기존 프로젝트: JavaScript 파일을 보면 jQuery로 작성한 코드를 볼 수 있다. Username과 Password 입력란에 입력의 유무의 따라 LOGIN 버튼의 배경색이 달라지는 것을 구현했었다.
이건 어떻게 리액트로 변환해야 될까?
다음 장에서 "jQuery를 리액트로 변환하기(2)" 과정을 다룰 것이다.
프론트엔드 개발자입니다.