[TIL] 20230619 - React Hooks useState 배치처리/useEffect/useRef/useContext/최적화(React.memo, useCallback, useMemo)

 React Hooks 

[useState/useEffect/useRef/useContext/최적화(React.memo, useCallback, useMemo)]

useState Hook : 리렌더링이 일어날 수 있게 상태를 변경해주는 Hook
useEffect Hook : 컴포넌트가 화면에 보여졌을때, 컴포넌트가화면에 사라졌을때 어떠한 것을 실행하게하는 Hook
useRef Hook : DOM 요소에 접근 할 수 있게 하는 Hook
useContext : props drilling을 방지하기 위해 전역 데이터를 관리할 수있게 해주는 Hook

<최적화 (React.memo, useCallback, useMemo) >
React.memo : 부모컴포넌트로 인해 자식 컴포넌트들이 전부 리렌더링 되는것을 막는것(컴포넌트 memoization)
useCallback : 함수형 컴포넌트의 경우 App.jsx가 랜더링되면서 함수 컴포넌트도 전부 다시 그려지는데 함수자체를 메모리에 저장해두고 주소 변경 없이 불러와서 리렌더링을 방지하는 것
useMemo : 동일한 값을 반환하는걸 매번 렌더링하면 비효율적, 그래서 특별한 메모리에 함수 반환 값을 저장후 그걸 불러와서 사용한다. 캐싱한다고 보통 표현

 

 

state의 배치 처리

useRef로 처음 랜딩시 id입력 input에 커서가 포커싱 되게 하고

아이디가 10자리 넘으면 pw로 포커싱 되도록 만들기

import React, { useEffect, useRef, useState } from 'react';

function App() {
    const idRef = useRef('');
    const pwRef = useRef('');
    const [idValue, setIdValue] = useState('');

    useEffect(() => {
        idRef.current.focus();
        // if (idValue.length >= 10) {
        //     pwRef.current.focus();
        //     console.log('10자리 넘음');
        // }
    }, [idValue]);

    return (
        <>
            <div>
                아이디 :{' '}
                <input
                    type="text"
                    ref={idRef}
                    value={idValue}
                    onChange={(event) => {
                        setIdValue(event.target.value);
                        console.log('id', idValue);
                        if (idValue.length >= 10) {
                            pwRef.current.focus();
                            console.log('10자리 넘음');
                        }
                    }}
                />
            </div>
            <div>
                비밀번호 : <input type="password" ref={pwRef} />
            </div>
        </>
    );
}

export default App;

useEffect를 사용해서 의존성 배열에 idValue 를 넣고 값이 변하면 작동하도록 하면된다.

 

그런데, onChange안에 넣으면 안되는 이유는??

onChange 안에 함수를 넣으면 11자리를 넘어야 포커스가 이동된다.

 

혹시나 setIdValue위로 if문을 넣어도 역시나 똑같이 11자리 입력이 되어야 focus 이동ㅎㅎㅎㅎㅎㅎㅎㅎㅎ!

id value값을 확인해 보니 처음 입력시 빈값이 나오고 하나씩 늦어 11자리입력해야 10자리 넘는다고 나옴

이는 아직 배치 업데이트로 인해서 업데이트 전이기 때문에!

리액트에서 state를 배치 업데이트 하기 때문에 한박자 늦는것이다.

 

 

 

useState는 일반 업데이트방식과 함수형 업데이트 방식이 있다.

// 일반 업데이트 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

리액트는 성능을 위해서 (불필요한 리렌더링을 방지하기 위해서) setState를 단일 업데이트로 한꺼번 모아서 배치 처리하도록 해두었기때문에 일반업데이트의 경우는 여러번 반복해서 써줘도 한번밖에 작동하지 않는다.

 

그렇기 때문에 useEffect를 사용해서 id값이 변경될때(id가 10자리 넘었을때!) 실행되도록 useEffect 의존성 배열에 idValue를 넣어 사용해야한다.

 useEffect(() => {
    idRef.current.focus();
    if (idValue.length >= 10) {
        pwRef.current.focus();
        console.log('10자리 넘음');
    }
}, [idValue]);

 

그외 hooks 자세한 내용 복습 필요 !