본문 바로가기
반응형

react205

리액트 - jsconfig.json로 component import 자동완성 리액트 전체 링크 아래와 같은 컴포넌트가 있다고 하자. import React from 'react'; const AutoComplete = () => { return ( ); }; export default AutoComplete; App.js에서 auto를 입력하여도 자동완성이 나오지 않는다. 아래처럼 AutoComplete.js가 열려있다면, auto만 입력해도 자동으로 컴포넌트를 불러온다. jsconfig.json을 만들어 설정을 추가하면 파일을 열지 않아도 자동으로 import 할 수 있다. 먼저 src > jsconfig.json 파일을 만든다. Ctrl + Shift를 눌러서 나오는 내용을 입력하거나 아래의 코드를 추가한다. { "compilerOptions": { "target": "es6.. 2022. 3. 24.
리액트 - useRef를 이용하여 타이머 만들기 리액트 전체 링크 로컬 변수를 사용할 때 useRef를 활용할 수 있다. useRef는 current 속성을 가지고 있고 이 값을 변경해도 컴포넌트가 렌더링되지 않는다. Timer component에서 시간, 분, 초를 입력받는다고 가정하자. count할 시간은 시간에 3600, 분에 60을 곱한 후 나온 결과를 초와 함께 더한다. 그리고 setInterval를 담을 interval도 useRef로 선언한다. const Timer = ({ hh, mm, ss }) => { const HH = hh ? parseInt(hh) : 0; const MM = mm ? parseInt(mm) : 0; const SS = ss ? parseInt(ss) : 0; const count = useRef(HH * 60 .. 2022. 3. 23.
로그인 폼 만들기 - useReducer로 Input 관리 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 로그인을 하기 위해 ID와 비밀번호를 입력한다. useState를 이용해서 loginID와 loginPassword를 이용하였다. const [loginID, setLoginID] = useState(""); const [loginPassword, setLoginPassword] = useState(""); 만약 필요한 input이 늘어난다면 관리해야 할 useState가 input의 개수만큼 늘어난다. useReducer를 이용하면 간편하게 input을 관리할 수 있다. useReducer를 import한다. import React,.. 2022. 3. 20.
리액트 package.json에서 port 변경 리액트 전체 링크 package.json에서 scripts에 아래와 같이 변경하면 npm run start를 할 경우 설정된 포트로 접속된다. "scripts": { "start": "set PORT=3003 && react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, 2022. 3. 18.
로그인 폼 만들기 - Caps Lock 감지 리액트 전체 링크 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - Caps Lock 감지 - useReducer로 Input 관리 비밀번호를 입력할 때, Caps Lock을 감지할 수 있으면, 비밀번호가 틀리는 것을 어느 정도 피할 수 있다. 여기서는 ID, Password에서 입력을 할 경우 Caps Lock을 감지하도록 하자. capsLockFlag에 따라 className과 Caps Lock On/Off로 변경되도록 한다. {capsLockFlag ? "Caps Lock On" : "Caps Lock Off"} caps lock 감지를 위한 flag를 useState로 선언한다. 위의 span에서 사용하기 위한 값이다. const [caps.. 2022. 3. 14.
로그인 폼 만들기 - 비밀번호 표시 리액트 전체 링크 프로젝트 전체 링크 로그인 폼 만들기 - 아이디 한글 입력 불가 처리 - 아이디 저장 - 비밀번호 표시 - 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.
반응형

티스토리툴바