[React.js] state와 ref 비교하기

state와 ref 비교하기

들어가며

• 리액트에서 자주 사용되는 @ref@와 @state@를 비교해보자.

 

비교

• @useState@를 통해 생성된 객체는 리렌더링 중에 초기화가 되지만, @useRef@를 통해 생성된 객체는 리렌더링 중에 초기화가 되지 않는다.
• @useState@는 @[value, setValue]@를 반환하고, @useRef@는 @{ current : value }@를 반환한다.

 

@ref@	@state@
@useRef(initialValue)@는 @{ current: initialValue }@을 반환	@useState(initialValue)@는 @state@ 변수의 현재값과 @state@ 설정자 함수@([value, setValue])@를 반환
Mutable → 렌더링 프로세스 외부에서 @current@ 값을 수정하고 업데이트할 수 있음.	Immutable → @state@ 설정자 함수를 사용하여 @state@ 변수를 수정해 리렌더링을 대기열에 추가해야 함.
변경 시 리렌더링을 촉발하지 않음.	변경 시 리렌더링을 촉발함.
렌더링 중에는 @current@ 값을 읽거나 쓰지 않아야 함.	언제든지 @state@를 읽을 수 있음. 각 렌더링에는 변경되지 않는 자체 state Snapshot이 있음.

 

사용 예제 코드

@useState@ 

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

 

@useRef@ 

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

export default TextInputWithFocusButton;

 

참고 사이트

ref로 값 참조하기 – React