[React] useRef / useMemo

 

 

 

 

---

 

 

useRef

 

 

ref (reference)

1. 특정 DOM을 선택하고 싶을 때 사용한다.

2. 컴포넌트가 re-rendering될 때마다 기억하고싶은 값을 저장할 때 사용한다.

    useRef에서 관리하는 값은 바뀌어도 re-rendering되지 않는다.

    ( setTimeout, setInterval의 id, 외부라이브러리를 사용하여 생성된 인스턴스 scroll위치 등)

 

 

React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려고 한다.

( 데이터는 부모에서 자식으로 props로 전달 )

 따라서 HTML element중 자체적으로 특정 data를 가지는 <form> 태그의 <input><select> 등은 state로 값을 관리하는데, 

이처럼 내부상태가 react에 의해 제어되는 것을 Controlled Component,

이 값들을 state로 관리하지않고 DOM자체에서 폼 데이터를 다루는 ref를 사용하는 방식을

'Uncontrolled component' 라고 한다.

 

 

 

✔️ 사용방법

 

  1. import 

import React, { useState, useRef } from "react";

 

 2. ref 넣을 객체 생성

  const nameInput = useRef()

 

3. 선택하고싶은 DOM에 ref객체를 설정 (2번의 ref객체와 연결)

      <input
        placeholder="name"
        name="name"
        onChange={onChange}
        value={name}
        ref={nameInput}
      ></input>

 

4. 객체.current 로 원하는 DOM 사용

  : ref값은 항상 객체이며, 항상 current prop을 가지고 있는다. ( current prop은 ref가 연결된 실제 값을 품고 있음)

console.log(~useRef)

  const onReset = () => {
    setInput({
      name: "",
      nickname: "",
    });
    nameInput.current.focus();
  };

 

 

 

 

 

[사용예시]

 : 기존에 input 태그에서 onChange event로 사용자 입력값을 가져와서 state로 관리하던 것을 - 제어 컴포넌트

   state없이 ref로 값을 쉽게 가져올 수 있다. ( ~InputRef.current.value ) - 비제어 컴포넌트

 

nameInputRef.current.value = "" 로 input창 리셋가능

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

useMemo

 

 

 : 성능 최적화를 위하여 불필요한 호출을 방지하고, 연산된 값을 재사용한다. (memoized : 이전에 계산한 값을 재사용)

    deps 배열안에 넣은 내용이 바뀌면 등록한 함수 호출해서 연산, 바뀌지않으면 이전에 연산한 값을 재사용한다.

 

const name = useMemo(() => 어떤연산할지정의하는함수(users), [deps]);

 

 

 

 

(사용예시)

active값이 true이니 사용자의 수를 세어서 화면에 렌더링

 

 

1. count 함수 생성

function countActiveUsers(users) {
  console.log("사용자 수를 세는중...");
  return users.filter((user) => user.active).length;
}

 

2. 함수사용

  const count = useMemo(() => countActiveUsers(users), [users]);
  
    return (
    <>
      ....
      <div> 활성사용자 수 : {count} </div>
    </>

  useMemo를 사용하지않으면 다른곳에서 업데이트가 발생하여 리렌더링 될때도 count가 되어버림.