본문 바로가기
반응형

개발/React176

로그인 폼 만들기 - 비밀번호 표시 리액트 전체 링크 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 구글 로그인 폼을 참고하여 input의 type과 autocomplete 옵션을 변경하도록 만들면 된다. 이제 비밀번호 표시 체크박스를 누르면 비밀번호가 보이도록 해보자. 비밀번호 입력 input과 비밀번호 표시 체크박스는 아래와 같다. checkCapsLock(e)} value={loginPassword} onChange={(e) => setLoginPassword(e.target.value)} /> ... setPasswordOption(!passwordOption)} /> 비밀번호 표시 비밀번호 입력을 위해 us.. 2022. 3. 14.
로그인 폼 만들기 - 아이디 저장 리액트 전체 링크 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 아이디 저장 아이디 저장은 로컬 스토리지를 이용하여 로컬에 저장한다. 매번 아이디를 저장하는 것이 아니고, 로그인에 성공한 경우에만 ID를 저장하고, 불러온다. 그리고 아이디 저장이 체크되지 않은 경우에는 저장된 ID를 불러오지 않는다. 아이디 저장 checkbox와 로그인 button은 아래와 같이 선언하였다. 아이디 저장 ... 로그인 handleSaveIDFlag는 다음과 같다. const handleSaveIDFlag = () => { localStorage.setItem(LS_KEY_SAVE_ID_FLAG, .. 2022. 3. 13.
로그인 폼 만들기 - 아이디 한글 입력 불가 처리 리액트 전체 링크 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 아이디 한글 입력 불가 처리 ID input에 특정 문자만 허용하도록 하자. ID의 input은 아래와 같다. onKeyDown은 caps lock 감지에서 설명한다. checkCapsLock(e)} value={loginID} onChange={(e) => getLoginID(e)} /> loginID를 useState로 선언한다. 이 loginID를 ID input에서 사용하고, onChange로 변경한다. const [loginID, setLoginID] = useState(""); 단순히 ID를 입력하는 것은 .. 2022. 3. 13.
리액트 - 로그인 폼 만들기 Login Form 리액트 전체 링크 프로젝트 전체 링크 로그인 폼을 React를 이용하여 만들어보자. 아래와 같은 기능이 필요하다. - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 useReducer 적용 전 최종 코드 import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import * as mdef from "../library/myDefine"; import "../css/Login.css"; const LS_KEY_ID = "LS_KEY_ID"; const LS_KEY_SAVE_ID_FLAG = "LS_KEY_SAVE_.. 2022. 3. 9.
리액트 CSS - 간단한 accordion 만들기 리액트 전체 링크 FAQ에서 Quesition을 누르면 Answer가 나오도록 아래와 같이 display: none을 주었다. 하지만 조금 딱딱한 느낌이 난다. .faq-card-answer { position: relative; padding-top: 1rem; padding-bottom: 1.5rem; padding-right: 2rem; border: 0px solid rgba(225,228,230,.5); border-top-width: 1px; } .faq-card-none { display: none; } css에서 간단한 작업으로 아코디언을 만들 수 있다. display: none은 애니메이션 적용이 되지 않으므로, 아래와 같이 padding, bottom, height, 그리고 visibi.. 2022. 3. 2.
리액트 배열을 json으로 분리하기 (react json import) 리액트 전체 링크 FAQ 같은 내용은 웹이 서비스가 되는 도중에 변경될 일이 거의 없다. 따라서 qnaList를 json으로 분리하여 파일로 관리하는 것이 좋다. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: `this is react. 1 1 < 2 hello!! `, }, { category: "category2", question: "what is that ? 2", answer: "this is react. 2", }, { category: "category3", question: "what is that ? 3", answer: "this is react. 3", }, { category: "cat.. 2022. 3. 1.
리액트 html 코드 삽입하기 (dangerouslySetInnerHTML) 리액트 전체 링크 아래와 같이 qnaList의 내용을 바꿔보자. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: `this is react. 1 hello!! 1 < 2 `, }, ... ]; 하지만 html 코드는 반영이 되지 않고 그대로 문자열 처리가 된다. 아래와 같이 코드를 수정하면 html 코드를 그대로 반영한다. {/* {item.answer}*/} 2022. 3. 1.
리액트 - FAQ 카테고리 만들기 리액트 전체 링크 아래의 카테고리대로 선택할 수 있게 되었으니, const categories = [ { name: "자주 묻는 질문", value: "all", }, { name: "카테고리 1", value: "category1", }, { name: "카테고리 2", value: "category2", }, { name: "카테고리 3", value: "category3", }, ]; FAQ 목록을 각 카테고리 별로 분류하도록 해보자. const qnaList = [ { category: "category1", question: "what is that ? 1", answer: "this is react. 1", }, { category: "category2", question: "what is t.. 2022. 3. 1.
리액트 카테고리 필터 Category Filter 리액트 전체 링크 아래와 같은 카테고리가 있다고 가정하자. name이 실제 웹에서 보이는 문자열이고, 내부적으로는 value로 필터링을 한다. const categories = [ { name : "자주 묻는 질문", value : "all" }, { name : "카테고리 1", value : "category1" }, { name : "카테고리 2", value : "category2" }, { name : "카테고리 3", value : "category3" }, ]; 카테고리는 Q&A, FAQ 등을 분류하기 위해서 사용할 예정이다. const qnalist = [ { category: "category1", question: "what is that ? 1", answer: "this is rea.. 2022. 2. 27.
반응형

티스토리툴바