리액트가 화면을 재렌더링하는 3가지 경우

[mdgarden]

복습하고 싶어요!

[IGhost-P]

제가 예전에 정리했던 내용입니다!!
1,2, 는 꼭 아셔야하고
3은 최적화 를 생각하시면 아셔야 합니다! 3으로 인해 랜더링이 필요없는 자식도 랜더링이 되는데. 이럴때 React.memo를 사용하면 1이거나 2일때만 랜더링 시킬수 있습니다!

리액트에서 화면이 랜더링 되는 이유

1. state 변경이 있을 때

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

2. 새로운 props이 들어올 때

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

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

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

4. shouldComponentUpdate에서 true가 반환될 때

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

5. 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;