useRef

useRef ?

useRef는 React 함수 컴포넌트에서 DOM 요소나 다른 React 엘리먼트에 접근하는 데 사용되는 훅이다.
또한, 렌더링을 위해 필요하지 않은 값을 참조할때 사용되는 훅이기도 하다.

즉, 변화는 감지해야하지만, 그 변화가 렌더링을 발생시키면 안되는 경우 사용한다.

ToDo 프로젝트를 통해 알아보자.

---

current.value

현재 ToDo를 추가하는 로직에서 <input>의 값을 onChange 이벤트를 설정해 값이 변할때마다 useState를 이용해 변경해주고 있는데, 이 과정이 낭비라고 생각한다.

따라서 useRef를 적용해 변경해보자.

import {useState} from 'react';

import classes from './ToDoForm.module.css';

const ToDoForm = (props) => {
    const [todo, setTodo] = useState('');

    const errorHandler = (value) => {
      if (value.length === 0) {
        return false;
      } else {
        return true;
      }
    }

    const changeHandler = (event) => {
        setTodo(event.target.value);
    }
    const submitHandler = (event) => {
        event.preventDefault();
        const isValid = errorHandler(todo);
        if (isValid) {
          const todoList = {title: todo, id: Math.random()};
          props.onGetTodo(todoList);
        } else {
          props.onGetError(true);
        }
        
        setTodo('');
    }
  return (
    <div className={classes.form_wrapper}>
      <form onSubmit={submitHandler}>
          <label htmlFor='todoInput'>Type your To Do.</label>
          <input onChange={changeHandler} value={todo} id='todoInput' type='text'></input>
          <button type='submit'>Add</button>
      </form>
    </div>
  );
};

export default ToDoForm;

변경 전 코드이다.

import {useRef, useState} from 'react';

import classes from './ToDoForm.module.css';

const ToDoForm = (props) => {
    const enteredTodo = useRef();

    const errorHandler = (value) => {
      if (value.length === 0) {
        return false;
      } else {
        return true;
      }
    }

    const submitHandler = (event) => {
        event.preventDefault();
        const isValid = errorHandler(enteredTodo);
        if (isValid) {
          const todo = enteredTodo.current.value;
          const todoList = {title: todo, id: Math.random()};
          props.onGetTodo(todoList);
          enteredTodo.current.value = '';
        } else {
          props.onGetError(true);
        }
    }
  return (
    <div className={classes.form_wrapper}>
      <form onSubmit={submitHandler}>
          <label htmlFor='todoInput'>Type your To Do.</label>
          <input id='todoInput' type='text' ref={enteredTodo}></input>
          <button type='submit'>Add</button>
      </form>
    </div>
  );
};

export default ToDoForm;

위는 변경 후 코드이다.

사용법은 간단하다. useRef 훅을 이용해 변수를 선언해주고 접근하려는 태그에 ref 속성을 추가해 선언한 변수를 연결해주면 된다.

결과로 위 코드를 참조하자면 useRef로 선언한 enteredTodo 변수의 current 프로퍼티로 <input id='todoInput' type='text' ref={enteredTodo}></input> 가 할당된다.

따라서 enteredTodo.current.value로 현재 input 태그의 값에 접근할 수 있다.

다음으로는 useEffect()에 대해서 알아보자.