useRef는 리액트에서 useRef 를 import 함으로 사용가능하다.
참조로 JSX 요소들과 연결 할 수 있는데
input 컴포넌트를 useRef와 연결한 모습이다
이때 handleClick 함수에 이를 사용하여주는데 useRef를 통해 생성된 값들을 위해 우선은 current 속성에 접근해야 한다. useRef로부터 받는 값들은 항상 자바스크립트 객체이며 항상 current 속성을 가지고 있기 때문이다.
이때 playerName.current. 이후에는 input 태그의 모든 속성에 접근가능하다.
이를 통해 subitted state도 필요없어지고 handleChange 함수도 필요가 없어진다
h2태그에서 ?? 을 사용하여 코드를 더 간결히 만들었다
nullish coalescing
refs vs State
그렇다면 애초에 state를 없애고 playerName.current.value를 사용해도 되는것 처럼 보이지만 가장 중요한 차이점은 refs는 컴포넌트가 재실행 되지 않는다는것이다.
state 사용하는 경우
state는 UI에 바로 반영되어야하는 값들이 있을때 사용하기 좋다.
state를 사용하지 말아야 하는 경우
시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들을 갖고있는경우
refs 사용하는 경우
dom요소에 직접적인 접근이 필요할 때
