리액트JS - "setState"가 호출될 때마다 render가 호출됩니까?

React가 setState()가 호출될 때마다 모든 컴포넌트와 하위 컴포넌트를 다시 렌더링합니까?

만약 그렇다면, 왜 그럴까요? React가 상태가 변경될 때 필요한 만큼만 렌더링하는 것이 아닌가요?

다음 단순한 예제에서는 텍스트가 클릭될 때마다 두 클래스 모두 다시 렌더링되는데, 연속적인 클릭에서 상태가 변경되지 않기 때문에, onClick 핸들러가 항상 동일한 값으로 state를 설정한다고 하더라도:

this.setState({'test':'me'});

변경된 state 데이터가없는 경우에만 렌더링이 발생할 것으로 예상했는데요.

예제의 코드는 이곳에서 확인할 수 있고, 임베디드 스니펫도 있습니다: JS Fiddle에서

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();
        return (
            <p>자식 컴포넌트의 시간:{t}</p>
        );
    }
});
var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },
    render: function() {
        var currentTime = new Date().getTime();
        return (
            <div onClick={this.onTest}>
            <p>메인 컴포넌트의 시간:{currentTime}</p>
            <p>시간을 업데이트하려면 클릭하세요</p>
            <TimeInChild/>
            </div>
        );
    }
});
ReactDOM.render(<Main/>, document.body);

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js></script>

답변 1

기본적으로, shouldComponentUpdate는 상태가 변경되었을 때 상태가 직접 변경될 경우에 미묘한 버그를 방지하기 위해 항상 true를 반환합니다. 그러나 상태를 불변하게 처리하고 render()에서 props와 state를 읽기 전용으로만 다룰 경우에는 이전 props와 state를 그들의 대체품과 비교하는 구현으로 shouldComponentUpdate를 재정의할 수 있습니다.

질문의 다음 부분:

그렇다면 왜 그렇게 해야하는 거죠? 제 생각에는 React는 상태가 변경되었을 때 필요한 만큼만 렌더링한다고 생각했는데요.

렌더라고 할 수 있는 두 단계가 있습니다:

1. Virtual DOM 렌더링: render 메서드가 호출되면 컴포넌트의 새로운 가상 DOM 구조가 반환됩니다. 앞에서 언급한 대로, 이 render 메서드는 항상 setState()을 호출할 때마다 호출되며, shouldComponentUpdate는 기본적으로 항상 true를 반환합니다. 따라서 React에서는 기본적으로 여기서 최적화가 이루어지지 않습니다.




2. Native DOM 렌더링: React는 실제 DOM 노드를 브라우저에서 변경합니다. 그러나 변경된 내용이 있는 경우에만 변경하고 필요한 만큼만 변경합니다. 이는 React의 훌륭한 기능으로 실제 DOM 변경을 최적화하여 React를 빠르게 만드는 특징입니다.

답변 2

리액트는 동적인 웹 애플리케이션을 만들기 위해 사용되는 자바스크립트 라이브러리입니다. 리액트에서는 컴포넌트의 상태(state)를 관리하고, 상태가 변경되었을 때 변경된 내용을 렌더링(rendering)하여 화면에 반영합니다. 이렇게 상태가 변경되면 해당 컴포넌트의 render() 메서드가 호출되는데, 이 메서드는 컴포넌트가 어떻게 생길지를 결정하는 역할을 합니다.
일반적으로 setState() 메서드를 사용하면 컴포넌트의 상태가 변경되고, 변경된 상태를 기반으로 새로운 UI가 생성됩니다. 이때, render() 메서드가 호출되어 변경된 상태에 맞는 UI를 생성하게 됩니다. 즉, setState() 메서드가 호출되면 render() 메서드를 다시 실행하여 화면에 적절한 업데이트를 수행하는 것입니다.
하지만 모든 setState() 호출에 대해 render() 메서드가 호출되는 것은 아닙니다. 리액트는 내부적으로 변경된 상태를 비교하여 이전 상태와 동일하다면, 변경된 내용이 없으므로 render() 메서드 호출을 생략합니다. 이렇게 하면 성능을 향상시킬 수 있습니다. 따라서, setState() 메서드를 호출한다고 해서 항상 render() 메서드가 실행되는 것은 아닙니다.
상태 변경에 따라 render() 메서드를 호출하는 것은 리액트의 핵심 개념 중 하나입니다. 이를 통해 컴포넌트의 상태 변경에 따른 동적인 화면 업데이트를 간편하게 구현할 수 있습니다. 또한, 리액트는 가상 돔(Virtual DOM)을 사용하여 최소한의 업데이트만 수행하여 성능을 최적화합니다.
결론적으로, setState() 메서드를 호출하면 리액트는 해당 컴포넌트의 상태를 변경하고, 변경된 상태에 맞게 render() 메서드를 호출하여 UI를 업데이트합니다. 성능을 위해 리액트는 변경된 상태가 실제로 업데이트해야 할 내용과 다른 경우에는 render() 메서드 호출을 생략합니다. 이를 통해 리액트는 효율적인 화면 업데이트를 가능하게 합니다.