• Render Phase

  순수하고 side effects가 없습니다.

  일시중지될 수 있습니다.

  React에 의해 중단되거나 다시 시작됨.

• Pre-Commit Phase

  DOM을 읽을 수 있음

• Commit Phase

  DOM으로 작업할 수 있습니다.

  side effects을 실행하고 업데이트를 예약합니다.

state 변경이 있을 때

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

새로운 props 이 들어올 때

전달받은 props 값이 업데이트 되었다면 리렌더링이 된다. → 반은 맞고 반은 틀렸다.

<aside> 💡 *props의 변경이 발생하면 리렌더링이 일어나지만, ReadOnly이며 immutable한 props를 변경하기 위해서는 먼저 부모 컴포넌트가 렌더링 되면서 새로운 props를 가져오는 것이기 때문에 부모 컴포넌트 렌더링 없이 props가 변경되는 것은 불가능하다.

즉, 부모 컴포넌트가 렌더링될 때 비로소 자식 컴포넌트에게 넘겨주는 props가 교체되고 이에 맞게 자식의 렌더링이 이루어지는 것이다. 물론 props의 변화가 없더라도 렌더링은 이루어진다.

결론적으로, props의 변화는 렌더링 조건이 아니다. 🖐 React.memo는 단지 props의 변화를 이용하여 렌더링 최적화를 도와주는 도구이다.*

</aside>

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

새로운 prop 이 들어오지 않더라도 부모 컴포넌트가 리렌더링 된다면 자식 컴포넌트 역시 리렌더링이 된다. 그래서 코드의 양이 많아지면 렌더링량 또한 많아지게 되므로 최적화가 필수적이다.

shouldComponenetUpdate 에서 true가 반환될 때

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

forceUpdate가 실행될 때