Skip to content

6주차 기술 공유

Jump to bottom
Young-do Cho edited this page Dec 13, 2019 · 1 revision

useRef is not only for DOM references

우리는 functional component 안에서 값을 저장할 변수를 선언하는 3가지 방법이 있다.

  1. 단순한 const, let 변수
    • 해당 component가 re-rendering 할 때마다, 해당 변수값은 초기값이 다시 할당된다.
  2. useState를 통한 변수
    • re-rendering 하더라도 값은 지속적으로 유지된다.
    • 값이 변경될 때, re-rendering을 trigger한다.
  3. useRef를 통한 변수
    • 주로 DOM을 직접 조작하기 위해 사용되지만 더 많은 것을 할 수 있다.
    • mutable object 이기 때문에, re-rendering에도 값이 지속적으로 유지된다.
    • 값은 읽고 쓰는 것은 .current 속성으로 할 수 있다.
    • 값이 변경되어도 re-rendering을 trigger하지 않는다.

Counter 예제

function Component() {
  let variable = 5;

  setTimeout(() => {
    variable = variable + 3;
  }, 100);

  return <div>{variable}</div>;
}

1번 예제. variable의 값이 바뀌더라도 항상 초기값만 화면에 보이며, 부모가 re-render 될 때에도 초기값만 보일 것이다.

function Component() {
  const [variable, setVariable] = React.useState(5);

  setTimeout(() => {
    setVariable(variable + 3);
  }, 100);

  return <div>{variable}</div>;
}

2번 예제. variable의 값이 setTimeout을 통해 값이 추가되며, re-render 후 다시 setTimeout이 실행된다. 즉, setTimeout이 계속 실행되어, 약 100ms마다 3씩 값이 추가된다.

function Component() {
  const variable = React.useRef(5);

  setTimeout(() => {
    variable.current = variable.current + 3;
  }, 100);

  return <div>{variable.current}</div>;
}

3번 예제. 초기값만 화면에 보인다. 하지만, 해당 component의 부모가 re-render이 되면 해당 component도 re-render되므로, setTimeout에 의해 변경된 값이 화면에 보이게 된다.

How to cancelAnimationFrame 

function App() {
  const [state, setState] = React.useState(0);

  const requestRef = React.useRef();
  
  const animate = time => {
    // The 'state' will always be the initial value here
    requestRef.current = requestAnimationFrame(animate);
  };
    
  React.useEffect(() => {
    requestRef.current = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(requestRef.current);
  }, []); // Make sure the effect runs only once
  
  return <div>{state}</div>;
}

우리는 useEffect를 통해 예제의 requestAnimationFrame을 한번만 실행하도록 보장할 수 있다. 또한 useEffect에서 cancelAnimationFrame를 실행하는 함수를 반환하면, 해당 component가 unmount될 때 실행된다. 이 방식은 setTimeout에서도 동일하게 적용할 수 있다.

참고

Clone this wiki locally