[React] useRef

렌더링 계속 되는거 막고자 useRef 사용했는데 엉뚱한 결과가 나와서 공부하고 작성하는글.

 

요약 : 꼭 ref 어트리뷰트를 사용해야한다. 

그리고 화면 렌더링 되는곳에는 사용하면 안된다. 오직 값만!! 담아야한다.

---

✨ useRef ✨

: 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook

const ref = useRef(initialValue)
// initialValue: ref 객체의 current프로퍼티 초기 설정값
// 초기 렌더링 이후부터는 무시된다.

 

---

반환값

useRef는 단일 프로퍼티(current)를 가진 객체를 반환한다.

- current : 처음에는 전달한 초기값으로 설정된다.

consol.log를 찍으면 위와 같이 출력된다.

- 이 current를 다른 값으로 바꾸는 방법

: ref 객체를 JSX 노드의 ref 어트리뷰트로 React에 전달한다.

→ 그러면 React는 current 프로퍼티를 설정한다.

<input ref={내가 선언한 ref}/>

이런식으로 사용하면 된다

어트리뷰트 : HTML의 속성이다. <input type="text" value="0"> 여기서 input 엘리먼트의 type, value 속성은 어트리뷰트이다. 프로퍼티 : DOM의 속성이다.

---

주의사항

• ref.current 프로퍼티는 state와 달리 변이할 수 있다.
  그러나 렌더링에 사용되는 객체(예: state의 일부)를 포함하는 경우 해당 객체를 변이해서는 안 된다.
• ref.current 프로퍼티를 변경해도 React는 컴포넌트를 다시 렌더링하지않는다.
  ⇒ 따라서 시각적 출력에 영향을 주지 않는 정보를 저장하는데 적합하다.
• 렌더링 중에 ref.current를 쓰거나 읽지 않는다. 컴포넌트의 동작을 예측할 수 없기 때문이다.

---

=> 내가 작성한 코드가 이상하게 되었던게 이 주의사항을 지키지 않은것 때문이었다.

ref와 state를 혼용하여 함께 사용하였다.

 

input태그의 value어트리뷰트에 바로 ref값을 넣어서,

( <input value={ref}/> 이런 식으로 사용했다. )

 

사용자가 input에 값을 입력할 때 마다 렌더링이 되지 않았다.

(ref.current의 값이 변해도 화면에 렌더링이 되지 않기 때문이다.)

 

그리고 ref 어트리뷰트를 사용해야 한다는것도 모른채로 사용했다.

그저 "렌더링 방지!해야지!" 하는 생각뿐이었다.

---

ref를 사용하면-

• (렌더링할 때마다 재설정되는 일반 변수와 달리) 리렌더링 사이에 정보를 저장할 수 있습니다.
• (리렌더링을 촉발하는 state 변수와 달리) 변경해도 리렌더링을 촉발하지 않습니다.
• (정보가 공유되는 외부 변수와 달리) 각각의 컴포넌트에 로컬로 저장됩니다.

---

그리고 나의 사용방법

const valueref = useRef('');

이렇게 객체를 선언하고

<input className={styled.todoInput}
          type="text"
          placeholder='오늘 할 일은?'
          ref={valueref} 
          onKeyUp={enterKey}
        />

(여기서 사용할거임)

console.log(valueref);

를 해본다.

그러면 current 안에 input의 모든 정보가 저장된다. 여기서 value 값이 내가 input으로 입력한 값이다.

즉, value값만 뽑아서 사용해야한다.

 

입력된 값을 사용할때는 valueref.current.value로 하면 끝

const value = valueref.current.value;

난 이렇게 사용했다.

---

 

👇전체 코드는 여기👇

https://github.com/S2ej1n/MyTodoList

GitHub - S2ej1n/MyTodoList: 최대한 리렌더링이 되는것을 방지하고자 만들어본 투두리스트. 우당탕

---

+ 참고자료 : 리액트 공식문서 useRef