728x90
반응형
#미션!
아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하도록 코드를 짜보세요.
0. TIL
▶ useRef만 사용하면 가능하다고 생각했었는데, 딱 1번만 가능하고 새로고침을 하지 않으면 안 되었음.
useEffect와 useRef를 함께 써야하는 것을 알게 되었음.
▶<input>태그에 onChange 이벤트 부분에서 length를 구하는 것은 배치 업데이트와 관련됨!
이 부분은.. setId에 바로 반영이 되지 않고,
리랜더링이 끝나는 시점인 함수 끝나고 재호출되는 시점이였던거랑 유사한 것 같다..!
1. 내가 생각한 코드
import { useRef } from 'react';
function App() {
const idRef = useRef('');
const pwRef = useRef('');
const cntRef = useRef(0);
const onClickIdInput = () => {
idRef.current.focus();
cntRef.current++;
if (cntRef.current === 10) {
pwRef.current.focus();
}
};
return (
<>
<div>
id<input onChange={onClickIdInput} ref={idRef}></input>
pw<input ref={pwRef}></input>
</div>
</>
);
}
export default App;
▶useRef 훅만 사용했음
(1) id <input>태그에 onChange에 event에따라 cntRef가 +1 되도록 설정 : cntRef.current ++; / focus는 id <input>
(2) cntRef.current ===10 비밀번호에 focus가도록 pwRef.current.focus();
▶ (문제)
처음에만 잘 되고 두번째부터는 안됨... (새로고침을 해줘야함)
2. 강의 코드
import { useEffect, useRef, useState } from 'react';
import './App.css';
function App() {
const idRef = useRef('');
const pwRef = useRef('');
const [id, setId] = useState('');
const onIdChangeHandler = (event) => {
setId(event.target.value);
};
useEffect(() => {
idRef.current.focus();
}, []);
useEffect(() => {
if (id.length >= 10) {
pwRef.current.focus();
}
}, [id]);
return (
<>
<div>
아이디 :
<input type="text" ref={idRef} value={id} onChange={onIdChangeHandler} />
</div>
<div>
비밀번호 : <input type="password" ref={pwRef} />
</div>
</>
);
}
export default App;
▶ useEffect를 활용하기 (화면이 랜더링 될때, 어떤 작업이 하고싶다!)
▶ useEffect의 dependancy array =[id] --> id값이 바뀔때마다 실행
▶ useEffect 안에 id.length를 넣은 이유는 <input>에서 onChange 길이는 한 박자가 늦음..
(총 11자리 입력할때 포커스가 변경됨) --> 배치 업데이트여서! setId(event.target.value)는 바로 반영x
반응형
'TIL :: Today I Learned' 카테고리의 다른 글
#02 리액트 숙련 : React Redux 카운터 프로그램 만들기 (0) | 2023.11.08 |
---|---|
#09 리액트 입문 : 1차로 만들었던 todolist 리팩토링 (0) | 2023.11.08 |
#08 리액트 입문 : todolist 만들기 (리액트 컴포넌트 분리) (0) | 2023.11.06 |
#07 리액트 입문 : css 전체 화면의 가운데로 정렬 외. (0) | 2023.11.05 |
#06 리액트 입문 :: todolist 오류 정리 | list should have a unique "key" prop. 외 (0) | 2023.11.03 |