state(상태) vs refs(참조)

state(상태)

- 상태값들은 컴포넌트들의 재실행을 야기함.

=> 상태 업데이트 함수를 통해 변화가 이루어졌을 때

 

- UI에 바로 반영되어야하는 값들이 있을 때만 사용

 

- 시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들을 갖고 있을 경우

사용하지말아야함.

 

 

Refs(참조)

- 컴포넌트들이 다시 실행되게 하지 않음.

=> 컴포넌트들은 찾조 값이 바뀌었다는 이유로 재실행되지않음.

 

- refs를 사용할 수 있는 경우 => DOM 요소에 직접적인 접근이 필요할 때

 

 

import { useState, useRef } from "react";

export default function Player() {
  const playerName = useRef();

  const [enterPlayerName, setEnterPlayerName] = useState(null);

  function handleClick() {
    setEnterPlayerName(playerName.current.value);
    playerName.current.value = '';
  }

  return (
    <section id="player">
      <h2>Welcome { enterPlayerName ?? 'unknown entity'}</h2>
      <p>
        <input ref={playerName} type="text" required />
        <button onClick={handleClick}>Set Name</button>
      </p>
    </section>
  );
}

 

출처 : 유데미 [ Javascript부터 웹 어플리케이션 배포까지, React와 프론트엔드 최신 기술을 가장 쉽고 확실하게 배우는 법]