useRef(), 커스텀 훅

useRef()

리액트에서 DOM을 직접 조작할 때에는 DOM 요소에 ref라는 어트리뷰트를 준다.

useRef()는 ref로 사용될 변수명을 생성할 대 사용한다. 한편 useRef()가 전역 저장소에 저장됨을 이용하여 전역 객체로서 임시로 사용할 수 있다.

1. 객체 지정하기
   const 변수명 = useRef()
<input ref={변수명}>
   해당 변수명을 함수 내에서 사용하면 element를 반환한다.

const onClick = () => 변수명.current.focus();

2. 전역 변수 관리
   state와는 다르게 전역에서 관리되기에 컴포넌트를 리렌더링해도 유지되는 특징이 있다.
   초급 예시에서는 Todo리스트에서 id값을 1씩 increment하기 위해 사용된다.

const nextId = useRef(1)

const onAddTodo = () => {
    ...
    nextId.current += 1;
}

Flux 패턴을 사용하는 상태관리 툴을 이용하는 것이 권장된다.

커스텀 훅 만들기

함수를 반환하는 js파일을 import하여 훅처럼 사용할 수 있다.

// useInputs.js
import { useReducer } from 'react';

function reducer(state, action) {
  return {
    …state,
    [action.name]: action.value
  };
}

export default function useInputs(initialForm) {
  const [state, dispatch] = useReducer(reducer, initialForm);
  const onChange = e => {
    dispatch(e.target);
  };
  return [state, onChange];
}

//form.js
import React from 'react';
import useInputs from './useInputs';

const Info = () => {
  const [state, onChange] = useInputs({
    name: '',
    nickname: ''
  });
...
}

위의 커스텀 훅은 state의 초기값을 인수로 받아 state와 onChange 함수를 반환한다.