#01 리액트 숙련 : React Hooks 사용해서 input 태그 포커스 옮기기

#미션! 아이디가 10자리 입력되면 자동으로 비밀번호 필드로 이동하도록 코드를 짜보세요. 0. TIL ▶ useRef만 사용하면 가능하다고 생각했었는데, 딱 1번만 가능하고 새로고침을 하지 않으면 안 되었음. useEffect와 useRef를 함께 써야하는 것을 알게 되었음. ▶태그에 onChange 이벤트 부분에서 length를 구하는 것은 배치 업데이트와 관련됨! 이 부분은.. setId에 바로 반영이 되지 않고, 리랜더링이 끝나는 시점인 함수 끝나고 재호출되는 시점이였던거랑 유사한 것 같다..! 1. 내가 생각한 코드 import { useRef } from 'react'; function App() { const idRef = useRef(''); const pwRef = useRef(''); c..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 7.
• textsms

[React 입문] useState | 리액트 불변성 | 랜더링

1. useState const [state, SetState] = useState('initialState'); ▶ state는 ui 바꾸기 위해서 & 랜더링을 다시 하기 위함 ▶ 구조분해할당으로 받아서 사용 = return 배열 [ 초기값 갖고 있는 변수, 상태를 변경하는 메서드 Set ] ▶ 특정 기능을 수행하는 것들 = hook (useState, useEffect, useContext, useMemo 등) 2. 리액트 라이프 사이클 : 컴포넌트 생명주기 ▶ mounting - updating - unmounting ▶ (화면보임) - (화면갱신) - (화면에서 죽음) ▶ 컴포넌트가 화면갱신을 하기 위해 "랜더링"(state가 변경)되야함. 3. 불변성 ▶ 메모리에 있는 값을 변경할 수 없는 것...

• format_list_bulleted React
• · 2023. 11. 6.
• textsms