리액트 렌더링은 언제 언제?

열외! 나는 재렌더링에서 빼줘

** useEffect
프롭스가 계속 바뀌더라도, 처음 한번만 실행하거나, 마지막에 실행.

runs a function when the props change, or only at the start or end of the component's lifecycle.

import { useState, useEffect } from "react";

useEffect(()=>console.log("API호출 함수(난 한번만)"), []);

** Memo : 프롭스가 변경되지 않았으면, 재렌더링을 막는다.

const 메모Btn = memo(Btn); //Btn 에 memo 를 줌

    Btn.propTypes = {
      border: PropTypes.number,

이럴 때 재렌더링 발생

1. state 변경이 있을 때

state가 변경되면, 재랜더링 된다. set 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state 의 변경을 감지하지 못하게 된다.

  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);

 

2. 새로운 props이 들어올 때

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

-  새로운 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;

 

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