SNUBUS [트러블 슈팅(4)] - 리액트 virtual DOM, Diffing과 Reconciliation(하위 컴포넌트 리렌더링 조건 제대로 파악하기)

오늘은 SNUBUS를 제작하면서 리액트의 리렌더링에 대해 몰랐던 사실을 알게되어 블로그로 정리하려고 한다! 1️ [닥친 문제] 컴포넌트가 리렌더링될 때 그 안에 하위 컴포넌트가 리렌더링되지 않는다 이번에 SNUBUS 서비스의 Main page를 만들면서 겪은 문제는 다음과 같다.

Main 컴포넌트 안에 있는 state를 변경시켰을 때, 하위 컴포넌트인 Overlay 컴포넌트가 리렌더링되지 않아서 Overlay 컴포넌트에 적용되어 있는 애니메이션이 재실행되지 않았다. 코드를 보면서 이해해보자.

아래 코드는 Main 컴포넌트와 그 스타일 파일(Emotion)인 MainStyle.js이다. // Main.js import React, { useState } from "react"; import { Containers, Overlay, MainWrap } from "./MainStyle"; import Headers from ".

/components/Header"; import Footer...