[React] 컴포넌트 강제 Re-render하기 (re-render 원리에 대한 이해)

원글: How and when to force a React component to re-render (주의❕ 의역 다수 존재)

https://javascript.plainenglish.io/re-render-a-functional-react-component-1d64fa9a0c60

리액트는 보통 자동적으로 컴포넌트를 리렌더한다. 하지만 강제적으로 리액트가 컴포넌트를 리렌더하도록 하기 위해서는 리액트의 리렌더 방식에 대한 이해가 필요하다.

웹 발전의 시작에서부터 지금까지 HTML과 CSS가 웹 사이트의 시각적인 부분을 담당하고 있다. 하지만 JavaScript가 등장함으로써 우리는 렌더링된 페이지의 HTML을 읽고 업데이트할 수 있게 되었다. 이를 DOM API라고 한다.

jQuery와 같은 라이브러리는 이러한 DOM API 위에 향상된 기능과 호환성을 가진 추상적인 개념의 레이어를 제공했고, 이를 통해 개발자들이 쉽게 웹 어플리케이션을 구축할 수 있게 되었기 때문에 엄청난 인기를 끌었다. 하지만 jQuery는 한계가 있었다. 개발자들이 동적으로 로드된 컨텐츠들을 다룰 때 생기는 결정적인 문제들(JavaScript의 상태(변수)가 바뀌는 것이 DOM(HTML)에 즉시 영향을 끼치지 못해서 결과적으로 둘의 싱크를 맞추지 못한 것)을 해결하지 못했다.

반면에 React와 같은 프레임워크를 사용하면 이 문제를 해결할 수 있다. React는 어플리케이션의 상태를 유지하기 위해 JavaScript에 의존한다. 페이지의 각 객체에 대한 JavaScript의 참조값을 포함하는 최상위 부모 객체를 Virtual DOM이라고 부른다. 이 가상 DOM에 생기는 변화를 자동적으로 실제 DOM에 반영하는 것이 React의 가장 큰 기능이다. 그러면 우리는 어떻게 가상 DOM을 업데이트 할 수 있을까? 이는 컴포넌트에서 state와 props를 다룸으로써 가능하다.

그러면 여기서 한 가지 의문점이 생긴다. 만약 예상한 대로 컴포넌트가 업데이트 되지 않는다면 어떻게 될까? 그럴 때 강제로 컴포넌트를 업데이트 할 수도 있을까?

컴포넌트가 리렌더링 되지 않는 이유

자동적으로 컴포넌트가 업데이트 되지 않는다고 해서 강제적으로 리렌더링을 하는 것은 좋은 방법이 아니다. 그래서 리렌더를 고려하기 이전에, 작성한 코드를 분석하는 것이 먼저이다. React 기능의 활용은 결국 개발자의 코드에 달려있다.

1. state를 올바르게 업데이트 하지 않은 경우

여기 이름 Juan을 보여주는 간단한 앱이 있다.

버튼을 클릭하면 changeUserName 함수가 트리거 되면서 이름이 Peter로 바뀌도록 설계됐다. 하지만 버튼을 클릭해도 아무런 일도 일어나지 않을 것이다.

import { useState } from "react";

function App() {
  const [user, setUser] = useState({
    name: "Juan"
  });

  function changeUserName() {
    user.name = "Peter";
    setUser(user);
  }

  return (
    <div className="App">
      <p>User name: {user.name}</p>

      <button onClick={changeUserName}>Change user name</button>
    </div>
  );
}

React는 상태가 변경되면 얕은 비교 즉, 참조값 비교를 통해 이전 값과 현재 값이 같은 객체인지를 체크한다. 위의 예시에서 리렌더링이 발생하지 않은 이유는 user 객체의 name이라는 프로퍼티만을 업데이트 했을 뿐, user가 가리키는 참조값이 업데이트 된 것이 아니기 때문이다. React는 setUser가 호출되기 전과 후의 user를 같은 주소를 갖는 동일한 객체로 판단하기 때문에 어떠한 변화도 감지하지 못한 것이다.

React의 상태는 불변성이 유지되어야 한다. 상태의 자료형이 참조형이라면 완전히 새로운 참조값을 갖는 상태로 업데이트를 해줘야하지 이전의 상태를 직접 건드려서 일부만 변경해서는 안된다.

그렇다면 위의 코드를 어떻게 수정하면 좋을까? 다음과 같이 변경된 값을 포함하는 새로운 객체를 생성해서 업데이트 함수에 전달하면 된다.

function changeUserName() {
   setUser({
     ...user,
     name: "Peter"
   });
}

기존 객체의 프로퍼티 값들은 유지하면서 name 프로퍼티만 업데이트 하되, spread 연산자를 사용해서 결과적으로는 새로운 참조값을 가지는 객체를 생성해서 업데이트 해주는 것이다.

2. state가 변경되지 않음에도 props를 업데이트 하는 경우

이 케이스는 불가능해보이지만 충분히 발생할 수 있는 상황이다. 그리고 보통은 버그를 발생시킨다. 아래는 그 예시로 시계를 보여주는 앱이다. 이 시계는 처음 렌더링 된 이후 시간이 변하지 않는다는 문제를 가지고 있다.

setMyTime 함수는 가독성이 좋지 않고, React 컴포넌트에게 좋은 코드는 아니다.

function App() {
  let myTime;

  function setMyTime() {
    myTime = new Date();
    setTimeout(() => {
      setMyTime();
    }, 1000);
  }

  setMyTime();

  return (
    <div className="App">
      <Clock myTime={myTime} />
    </div>
  );
}

function Clock(props) {
  return <p>Current time: {props.myTime.toString()}</p>;
}

App 컴포넌트가 처음 렌더링 되면서 setMyTime 함수가 호출된 이후, 매 초마다 setMyTime 함수가 재귀호출 되면서 myTime에 시간을 재할당하고, 리렌더링을 위해 Clock 컴포넌트에 전달한다. 그럼에도 불구하고 리렌더링이 되지 않는 이유는 App 컴포넌트가 myTime의 변화를 알아차리지 못하기 때문이다.

React에서 컴포넌트의 상태를 업데이트 하고 관리하기 위해서는 아래처럼 useState를 사용해 상태와 업데이트 함수를 정의해야 한다. 추가적으로 useEffect를 사용해 컴포넌트가 언마운트 될 때 clearInterval을 해서 버그를 방지할 수 있다.

const [myTime, setMyTime] = useState(new Date());

 useEffect(() => {
   var timerID = setInterval(() => tick(), 1000);

   return () => clearInterval(timerID);
 });

 function tick() {
   setMyTime(new Date()); 
 }

강제로 컴포넌트를 리렌더링 하는 방법

강제로 컴포넌트를 리렌더 하는 것은 대체로 추천되는 방법이 아니다. 컴포넌트가 리렌더링 되지 않는 경우 대부분은 코드상의 오류로 인한 것이기 때문이다. 하지만 만약에 정말로 강제 리렌더링이 필요한 경우라면, 방법이 없는 것은 아니다.

1. 클래스형 컴포넌트

클래스형 컴포넌트에서는 공식적으로 리렌더를 강제하는 API가 제공된다. 바로 forceUpdate() 메서드이다.

someMethod() {
   // 상태의 변화 없이도 강제로 렌더링 한다
   this.forceUpdate();
}

this.forceUpdate()를 호출하면 shouldComponentUpdate()를 건너뛰고 render() 메서드가 호출되기 때문에 상태의 변화가 없음에도 React가 가상 DOM과 DOM의 상태를 재비교하도록 강제할 수 있다. 여기에는 몇 가지 유의 사항이 있다.

• React에서 자식 컴포넌트는 shouldComponentUpdate()를 포함한 일반적인 라이프사이클 메서드들에 의해 작동되므로, 리렌더링을 강제할 수 있는 건 오직 현재 컴포넌트 뿐이다.
• 강제 리렌더링을 해도 여전히 가상 DOM은 DOM의 상태와 비교하여 리렌더의 유효성을 판단하기 때문에, 마크업의 변화가 있을 때만 DOM이 업데이트 될 것이다.

2. 함수형 컴포넌트

함수형 컴포넌트에서는 리렌더를 강제하는 공식 API가 존재하지 않는다. 때문에 몇가지 트릭을 사용해야 한다.

1. 상태 객체를 새로운 참조값을 가지는 객체로 바꾸기

someMethod() {
   // 상태가 변한 것처럼 흉내내 강제로 렌더링 한다
   setUser({ ...user });
}

user가 객체이고 React는 얕은 비교를 하기 때문에 spread 연산자를 사용해서 새로운 참조값을 가지는 객체로 업데이트 한다면, React는 상태가 변경되었다고 판단해 리렌더를 하는 것이다. 이는 상태가 객체나 배열인 경우에 적용할 수 있는 방법이다.

2. 빈 상태 변수로 업데이트 발생시키기

useState로 업데이트 함수만 선언하고, 강제로 리렌더링이 필요할 때 새로운 객체를 생성해 업데이트 하는 방법이다.

import { useState, useCallback } from "react";

function App() {
 const [, updateState] = useState(); // 상태 변수는 선언하지 않는다
 const forceUpdate = useCallback(() => updateState({}), []);

 console.log("rendering...");

 return (
   <div className="App">
     <h1>Time to force some updates</h1>
     <button onClick={forceUpdate}>Force re-render</button>
   </div>
 );
}

그럼 이제 Force re-render 버튼을 누를 때마다 컴포넌트가 리렌더 되어 콘솔에 로그가 찍힐 것이다. 이 때 useCallback을 사용해 첫 렌더 시의 forceUpdate 함수를 메모리에 저장해놓고, 자식 컴포넌트의 props로 안전하게 전달하도록 한다.

결론

반복해 얘기하지만 강제로 컴포넌트를 리렌더 하는 건 좋은 방법이 아니다. 그런 일이 일어나지 않도록 좋은 코드를 작성하는 것이 우선되어야 한다.