4. useRef & Custom Hook

useRef

• 렌더링이 불필요한 값을 참조하게 해주는 훅

import { useRef } from 'react';

const ref = useRef(initialValue)

• initial value로 초기화된 current 속성을 가지고 있는 ref 객체를 리턴

• 다음 렌더링에서도 useRef는 동일한 객체를 리턴하기 때문에 current 속성에 저장한 값은 나중에 읽어들일 수 있음

• ref의 변화는 리렌더링을 trigger하지 않는다는 점에서 state와 차이가 있음

ref와 다른 변수들의 차이

1. 일반 변수와 달리 매 렌더링마다 리셋되지 않고 값이 저장됨

2. state와 달리 리렌더링되지 않음

3. 외부 변수와 달리 컴포넌트 간에 공유되지 않음

ref로 DOM 조작하기

function MyComponent() {
  const inputRef = useRef(null);
  // ...
  return <input ref={inputRef} />;
}

function handleClick() {
  inputRef.current.focus();
}

1. null값을 초기값으로 갖는 ref 객체 생성

2. ref 객체를 ref attribute로 넘김

3. DOM노드가 스크린에 생성되고 나면 current 속성에 DOM 노드가 저장됨

4. ref의 current값으로 DOM 노드를 조작할 수 있음

5. 노드가 스크린에서 사라지면 current값은 null이 됨

렌더링 중에 ref 값을 read/write 하지 않기

• 리액트 컴포넌트는 항상 순수함수여야함

• 인풋이 동일하다면 항상 동일한 결과(JSX)를 리턴해야함

• 다른 순서나 다른 인수를 사용하여 호출해도 다른 호출의 결과에 영향을 미치지 않아야 함

• 렌더링 중에 값을 변경하거나 사용해야한다면 state를 쓸 것

function MyComponent() {
  // ...
  // 🚩 Don't write a ref during rendering
  myRef.current = 123;
  // ...
  // 🚩 Don't read a ref during rendering
  return <h1>{myOtherRef.current}</h1>;
}

function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123;
  });
  // ...
  function handleClick() {
    // ✅ You can read or write refs in event handlers
    doSomething(myOtherRef.current);
  }
  // ...
}

ref contents의 재생성 피하기

보통 ref의 초기값은 재렌더링시 무시됨

그러나 아래 코드는 매번 new VideoPlayer()를 생성하게 됨

function Video() {
  const playerRef = useRef(new VideoPlayer());
  // ...

불필요한 객체를 매번 생성하는 것은 낭비이므로 아래와 같이 작성

function Video() {
  const playerRef = useRef(null);
  if (playerRef.current === null) {
    playerRef.current = new VideoPlayer();
  }
  // ...

일반적으로 ref 값을 렌더링하는 동안 쓰지 않는 것이 좋지만 여기서는 실행과가 항상 동일한 값을 리턴하기 때문에 OK

Custom Hook

나만의 훅을 만들어 컴포넌트 간에 로직을 재사용할 수 있음

상태 관련 로직을 컴포넌트에서 공유하는 두가지 전통적인 방법 : render props, 고차컴포넌트

-> 커스텀 훅을 통해 두가지 방법을 대신할 수 있음

커스텀 훅 만드는 법

• 이름이 use로 시작하는 또다른 함수로 분리

  • use로 시작해야 Hook의 규칙을 지키고 있는지 확인 할 수 있음

• 커스텀훅은 리액트의 특별한 기능이라기보다 hook의 디자인을 따르는 관습

• 여러 컴포넌트가 같은 Hook을 사용해도 state나 effect를 공유하지는 않음(독립적)

  • 각각의 Hook에 대한 호출은 서로 독립적으로 useState나 useEffect를 호출한 것과 마찬가지

Hook의 규칙

아래의 규칙을 지켜야 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 할 수 있음

1. 최상위에서만 Hook을 호출해야함

2. 오직 React 함수내에서만 호출해야함

• 반복문, 조건문, 중첩된 함수안에서 Hook을 호출하면 안됨

  • 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장하기 위함

• React 함수 컴포넌트나 Custom Hook안에서만 Hook을 호출해야함

Hook이 최상위에서 호출되어야 하는 이유

한 컴포넌트 안에서 여러 번의 useState와 useEffect가 호출될 수 있음

리액트는 어떤 state가 어떤 useState와 대응하는지 어떻게 알 수 있을까?

• 훅이 호출된 순서에 따름

• 모든 렌더링에서 Hook의 호출 순서가 같기 때문에 올바르게 동작할 수 있음

• 그러나 조건문 안에서 훅을 호출하면 다음 렌더링시 훅의 호출순서가 변경될 수 있음

• 리액트는 이전 렌더링과 동일한 순서로 훅이 실행될 거라고 예상하기 때문에 버그가 발생할 수 있음

• 조건부로 effect를 실행하기를 원한다면 조건문을 Hook 내부에 넣어야 함