React는 상태 변경 시 컴포넌트를 다시 렌더링합니다.

1. React에서 상태 유지
2. React에서 다시 렌더링

React가 인기 있는 주된 이유 중 하나는 유연성, 효율성 및 동적 웹 애플리케이션을 구축할 수 있는 자유입니다. 상태는 React 라이브러리의 근본적인 혁신 중 하나입니다.

React에서 상태 유지

모든 React 구성 요소는 변경된 값을 저장하는 내부 상태 객체를 가질 수 있습니다. 상태 값이 변경될 때마다 응용 프로그램도 다시 렌더링됩니다.

자연스러운 질문은 어떤 종류의 가치가 국가에 포함되어야 하는가입니다.

상태에 저장할 수 있는 항목에는 제한이 없습니다. 모든 데이터 유형(문자열, 정수, 배열, 개체)이 될 수 있습니다.

실제로 상태는 API에서 수신한 데이터와 사용자 입력(예: 테마 및 인증 설정)에 따라 달라지는 값을 저장하는 데 자주 사용됩니다. 상태 개체에서 darkMode 속성을 가질 수 있습니다.

그런 다음 조건부 스타일을 적용하여 웹 앱에서 다크 모드 기능을 구현할 수 있습니다. 이 속성의 값이 false인 경우 앱의 배경은 옅고 텍스트는 짙습니다. true인 경우 어두운 배경과 흰색 텍스트를 갖게 됩니다.

React에서 다시 렌더링

React는 그 이름에 걸맞게 상태 값이 변경되면 애플리케이션의 다시 렌더링이 트리거됩니다. 기본적으로 상태가 변경될 때마다 모든 구성 요소가 다시 렌더링됩니다.

언뜻 보기에 이 기본 동작은 비효율적으로 보입니다. 많은 자식이 있는 구성 요소가 있을 수 있으며 하나의 상태 변수만 변경하면 트리의 모든 구성 요소가 다시 렌더링되지 않습니다.

최상의 시나리오에서 React는 업데이트된 값을 표시하는 구성 요소만 다시 렌더링해야 합니다.

문제는 모든 의도와 목적을 위해 React가 하는 일입니다. Virtual DOM에서 하나의 상태 또는 prop 값을 다시 렌더링하면 트리의 다른 구성 요소가 다시 렌더링됩니다.

그러나 이러한 리렌더링은 Real DOM의 그림자에 불과한 Virtual DOM에 국한되어 있으므로 리렌더링은 리소스를 많이 소모하지 않습니다.

마지막 단계에서 React는 Virtual DOM과 Real DOM을 비교하고 Real DOM에서 Virtual DOM과 다른 부분만 업데이트합니다. 이러한 방식으로 React는 모든 변경 사항이 DOM에 반영되고 동시에 효율적으로 유지되도록 합니다.

React 구성 요소는 상태 변경 시 다시 렌더링됩니다.

상태를 업데이트하기 위해 setState() 메서드(또는 useState() 후크)를 사용할 때마다 React 구성 요소가 다시 렌더링됩니다.

실제 예를 살펴보겠습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  console.log("re-rendered");
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setText(e.target.value)} />
      <h1>You entered: </h1>
      <p>{text}</p>
    </div>
  );
}

여기에 하나의 <input> 요소, 하나의 <h1> 및 하나의 <p>가 있는 간단한 애플리케이션이 있습니다. 누군가 텍스트 입력에 값을 입력할 때마다 업데이트되는 하나의 상태 변수 텍스트를 설정합니다.

이 코드가 배포된 CodeSandbox의 라이브 데모로 이동합니다. 콘솔을 열면 필드에 항목을 입력할 때마다 콘솔에 re-rendered 텍스트 출력이 표시됩니다.

shouldComponentUpdate() 메소드

후드 아래에서 무슨 일이 일어나고 있는지, 그리고 React가 구성 요소를 다시 렌더링해야 한다고 결정하는 방법을 이해하는 데 도움이 됩니다.

모든 구성 요소에는 부울 값을 반환하는 shouldComponentUpdate() 메서드가 있습니다. 이름에서 알 수 있듯이 이 메서드는 구성 요소를 다시 렌더링해야 하는 경우와 다시 렌더링해서는 안 되는 경우에 대한 기준을 정의합니다.

기본적으로 기준은 다음과 같습니다. 새 props를 받거나 상태를 변경할 때마다 구성 요소가 업데이트됩니다.

기본적으로 shouldComponent() 메서드에는 광범위한 정의가 있습니다. 현재 또는 상위 구성 요소가 새 prop 값을 받거나 state 값이 변경될 때마다 true를 반환합니다.

이렇게 하면 구성 요소를 건너뛰거나 다시 렌더링하여 중요한 변경 사항을 표시할 때 오류 및 지연을 방지할 수 있습니다.

그러나 상태 값 작업에 대한 일반적인 React 지침을 따를 수 있다고 확신하는 경우(예: 상태 값을 변경하지 않음) 사용자 지정 shouldComponentUpdate() 정의를 만들 수 있습니다.