React 로그인 Modal 만들기
React 로그인 Modal 만들기 9 - Redux Saga 적용 React 로그인 Modal 만들기 8 - Redux 사용하기 React 로그인 Modal 만들기 7 - JWT 적용하기 React 로그인 Modal 만들기 6 - Login 구현 React 로그인 Modal 만들기 5 - 회원 가입 Back end 구현 React 로그인 Modal 만들기 4 - 비동기 처리 React 로그인 Modal 만들기 3 - 회원 가입 React 로그인 Modal 만들기 2 - styled-component 사용하기 React 로그인 Modal 만들기 로그인 Modal 만들기기존에 개인 프로젝트로 로그인 창을 만들게 되면 별도의 웹 페이지로 로그인 화면을 구현을 했다. 하지만 좀 더 깔끔하고 반응적인 방법을 찾다가 Modal에 대해 알게 됐고 Modal을 이용해 Login 화면을 구현해 보고자 한다. 로그인 컴포넌트 만들기가장 바깥 Wrapper는 로그인 버튼을 누른 상태와 누르지 않은 상태를 보여줘야 함으로 조건절을 이용해 classname을 변경하도록 설정한다. // Login 페이지가 열리면 modal-wrapper가 선택된다. <div className={open ? "modal-wrapper" : null}> 내부 컴포넌트도 상태에 따라 보이거나 보이지 않게 상태를 변경해줄 필요가 있어 조건절을 통해 내부 컴포넌트를 가져올 수 있도록 설정한다. {open ? ( <div className="login-modal"> <div className="login-header">로그인</div> <div className="login-input"> <div className="login-id"> <input className="email" type="email" id="email" placeholder="Email" onChange={onChangeEmail} /> </div> <div className="login-password"> <input className="password" type="password" id="password" placeholder="Password" onChange={onChangePassword} /> </div> <div className="close-login"> <button className="close-button" onClick={close}> 닫기 </button> </div> </div> </div>) : null} LoginTemplate.js