✏️ useState와 useRef의 차이점

useState

컴포넌트 렌더링을하며 상태 값을 관리하고, 상태가 변경될때마다 컴포넌트가 리렌더링 하는 과정을 거침

함수를 호출할때마다 컴포넌트가 계속~~ 그려지고 새로운 상태값이 반영된다.

 

useRef

컴포넌트 렌더링과 관련 없이 값을 유지하고싶을때, 값이 변경된다해도 컴포넌트가 리렌더링 되지 않음

current속성을 통해 접근한다해도, 값은 변경된다하지만 컴포넌트는 리렌더링 되지않음 -> 이전값을 기억할 수 있음 

설정된 ref값은 컴포넌트가 계속해서 렌더링되어도 계속 유지함 (언마운트 전까지) -> ref의 값 변화가 일어나도 렌더링으로 인해 내부변수들이 초기화 되는것을 막아줌. 

ex) 컴포넌트가 100번 렌더링되었다 -> ref에 저장된 값은 유지된다.

결국은 함수 컴포넌트에서 값이 변경되더라도 렌더링을 유지해야할때 사용한다. 

DOM요소에 접근할때도 사용함

 

정리하면 state는 리렌더링 될때 , 꼭 필요한 값을 다룰때 쓰면 좋고

ref는 리렌더링을 발생시키지 않는 값을 저장할때 사용한다. (내부로 안보일때 사용가능)

 

ref는 객체니까 Ref.current를 적어줘야한다. 

 

 

input을 관리할때 값 자체는 useState를 통해 관리하지만 (폼제출할때)

input으로 직접 접근하려고 할때는 useRef속성을 사용한다.

 

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

function App() {
    // useState를 사용하여 상태값 관리
    const [inputValue, setInputValue] = useState('');

    // useRef를 사용하여 이전 입력값을 기억
    const inputValueRef = useRef({ value: '' });

    // 입력값이 변경될때마다 호출함
    const handleChange = (event) => {
        const newValue = event.target.value;
        setInputValue(newValue);
    };

    // 폼 제출할때 호출됨
    const handleSubmit = (event) => {
        event.preventDefault();
        // 현재 입력값을 useRef를 통해 저장
        inputValueRef.current.value = inputValue;
        // 이전 입력값을 useRef를 통해 가져와서 출력
        alert(`useRef의 값: ${inputValueRef.current.value}`);
        // 입력값 초기화
        setInputValue('');
    };

    return (
        <>
            <form onSubmit={handleSubmit}>
                {/* useState를 사용함 */}
                <input type="text" value={inputValue} onChange={handleChange} />

                {/* useRef를 사용해서 이전 입력값을 저장 */}
                <input type="hidden" ref={inputValueRef} />

                <button type="submit">제출하기</button>
            </form>

            {/* 현재 입력값 출력 */}
            <p>값은: {inputValue}</p>
            <p>useRef의 값: {inputValueRef.current.value}</p>
        </>
    );
}

export default App;