[react] 리렌더링이 되는 조건들 살펴보기

state 변경이 있을 때

-  react 에서 유동적인 데이터를 저장하기 위해서 state 라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서는 state 를 직접 조작해서는 안되고 setState() 메서드를 이용해 주어야한다. 왜냐하면 리액트는 state 의 변경이 감지되면 리렌더링을 해주는 데 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state 의 변경을 감지하지 못하게 된다.

 

새로운 props이 들어올 때

-  전달받은 props 값이 업데이트 됬다면 리 렌더링 된다.

부모 컴포넌트가 렌더링 될 때

-  새로운 prop 이 들어오지 않더라고 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링이 된다.

 

shouldComponentUpdate에서 true가 반환될 때

- 각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있는데 이는 state가 병경되거나 새로운 props를 전달받는경우 실행이 된다 이때 기본적으로 return 값은 true 가 되어 rendering 이 시작되지만 rerendering 이 필요하지 않은 부분이라면 개발자가 return value 를 false 값으로 지정함으로써 리렌더링 되는 상황을 막아줄수 있게된다.

forceUpdate가 실행될 때

-  props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 그때 사용할수 있는 메서드 이다.

import React from 'react';
  
class App extends React.Component {
  reRender = () => {
    // calling the forceUpdate() method
    this.forceUpdate();
  };
  render() {
  
    console.log('Component is re-rendered');
    return (
      <div>
        <h2>GeeksForGeeks</h2>
        <button onClick={this.reRender}>Click To Re-Render</button>
      </div>
    );
  }
}
export default App;

 

위와 같은 상황에서 리액트는 리렌더링 된다 하지만 지나친 리렌더링은 성능을 악화시킴으로 리렌더링을 필요할 대만 작동하게 함으로써 최적화 작업을 해줄수 있다. 그러한 내용은 다음 글에 알아보자