2월 10일 여정 33일차이다.

외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있습니다. 그럴 땐, 리액트에서 ref 라는 것을 사용합니다.

오늘의 Today I Learned

useRef

자바스크립트를 사용 할 때에는, 특정 DOM을 선택해야 하는 상황이 있다.
그럴때는 getElementById, querySelector를 사용하여 DOM Selector함수를 사용해서 DOM을 선택한다.

그러나 리엑트를 사용하면 달라지게 된다. 그럴때 사용하는 것이 useRef이다. 스크롤바 위치를 가져오거나 input에 포컷를 해줄때 사용하게 된다.

import { useEffect, useRef } from "react";
import "./App.css";

function App() {
  const idRef = useRef("");

  // 렌더링이 될 때
  useEffect(() => {
    idRef.current.focus();
  }, []);

  return (
    <>
      <div>
        아이디 : <input type="text" ref={idRef} />
      </div>
      <div>
        비밀번호 : <input type="password" />
      </div>
    </>
  );
}

export default App;

위의 코드를 실행하게 되면 랜더링이 되자마자 focus가 들어가는 것을 볼 수 있다.

그 다음에는 저장공간으로써의 Ref가 있다.
그때 Ref에 저장한 값은 랜더링을 일으키지 않는다. state의 경우 랜더링이 일어나면 내부 변수가 초기화 된다.
하지만 useRef는 변화가 일어나도 안에서 랜더링이 일어나지 않는다.

import "./App.css";
import { useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  const plusStateCountButtonHandler = () => {
    setCount(count + 1);
  };

  const plusRefCountButtonHandler = () => {
    countRef.current++;
  };

  return (
    <>
      <div>
        state 영역입니다. {count} <br />
        <button onClick={plusStateCountButtonHandler}>state 증가</button>
      </div>
      <div>
        ref 영역입니다. {countRef.current} <br />
        <button onClick={plusRefCountButtonHandler}>ref 증가</button>
      </div>
    </>
  );
}

export default App;

자 여기서 ref 영역입니다의 값은 랜더링이 일어나지 않기 때문에 안에 값은 변하지만 화면에 보이는 값은 안변한다.

마지막으로

오늘도 새벽3시가 다 되서야 자게 되었다. 하지만 더 열심히 해야한다...