오늘은 무엇을 했나요?

토니와 거의 7시간 넘게 ToDoList 페어프로그래밍을 진행했다.

캘린더와 투두 리스트 추가 기능까지 구현 완료! 우선은 페어프로그래밍으로 기능 구현을 하고, css style 적용은 figma를 기반으로 각자 파트를 나눠 금요일에 진행하기로 결정했다.

오늘의 나는 무엇을 새롭게 배웠나요?

[1] Batching이란?

React가 성능을 향상시키기 위해 여러 개의 state 업데이트를 하나의 리렌더링으로 묶는 것

예를 들어, 하나의 클릭 이벤트 안에 두 개의 state 업데이트를 가지고 있다면, React는 언제나 이 작업을 batch 업데이트하여 하나의 리렌더링으로 만듭니다. 이 과정은 불필요한 리렌더링을 줄이고, 컴포넌트가 “반만 완료된” state를 렌더링하는 것을 방지합니다

기존의 Batch

import { useState } from "react";

function Counter() {
	const [count, setCount] = useState(0);

	function increaseCountThree() {
		// 아래의 작업은 모두 일괄적으로 묶여 처리된다. 한 번의 리렌더링만 발생한다.
		setCount((prev) => prev + 1);
		setCount((prev) => prev + 1);
		setCount((prev) => prev + 1);
	}

	return (
		<div>
			<button onClick={increaseCountThree}>+1</button>
			<p>Count : {count}</p>
		</div>
	);
}

export default Counter;

React 18 이전까지는 batch 업데이트가 브라우저 이벤트와 내장 훅에서만 작동하였습니다. 즉, 비동기 작업(romise, setTimeout 등)이나 Native Event Handler 등에서 발생하는 state 업데이트는 batch 업데이트되지 않았습니다. 

• 왜냐하면 이전에는 브라우저의 이벤트가 실행되는 중에만 Batching 작업을 수행했기 때문입니다. 따라서 이벤트가 종료된 후에 실행되는 경우는 Batching 작업이 불가능했습니다.

이 경우에는 컴포넌트가 state 업데이트마다 리렌더링되어 성능 저하와 버그 발생의 위험이 있었습니다.

문제점

function App() {
	const [count, setCount] = useState(0);
	const [flag, setFlag] = useState(false);

	function handleClick() {
		fetchSomething().then(() => {
			// React 17 이전의 버전에서는 해당 작업을 Batching 처리하지 않는다.
			// 왜냐하면 해당 작업은 이벤트가 종료된 이후 (100ms 뒤) 에 실행되기 때문이다.
			setCount((c) => c + 1); // 리렌더링 유발
			setFlag((f) => !f); // 리렌더링 유발
		});
	}

	return (
		<div>
			<button onClick={handleClick}>Next</button>
			<h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
		</div>
	);
}

function fetchSomething() {
	return new Promise((resolve) => setTimeout(resolve, 100));
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

state update 작업이 비동기적으로 처리되어 Event가 종료된 후에 실행되기 때문에, React의 Batching 작업에 걸리지 않아 두 차례 리렌더링을 유발시켰다.

React의 비공식적 API unstable_batchedUpdates()를 사용해서 강제 배치 프로그래밍을 할 수 있다고 해요! (18버전 이전에.. 지금은 사용할 필요가 없음)

Automatic Batching

React 18에서는 createRoot를 통해 Automatic Batching이라는 개선된 버전의 batch 업데이트를 도입했습니다

Automatic Batching은 모든 state 업데이트를 어디서 왔는지와 상관없이 자동으로 batch 업데이트하게 해줍니다. 즉, timeout, promise, 네이티브 이벤트 핸들러 등 모든 이벤트에서 발생하는 state 업데이트도 React에서 제공하는 이벤트와 동일하게 batch 업데이트할 수 있습니다. 이를 통해 렌더링을 최소화하고, 애플리케이션에서 더 나은 성능을 기대할 수 있습니다.

• 이전 버전에서의 React에서는 componentDidUpdate()가 실행될 때 변경 사항을 확인하고 모아서 업데이트를 처리했지만, React 18부터는 렌더링 결과를 일시적인 메모리에 저장하여 일괄 처리하는 방식을 사용합니다.

저 위의 코드를 지금 react로 하면 batch가 잘 되는걸 볼수 있어요

추가적으로 ReactDOM.flushSync()

react-dom 라이브러리에 추가된 ReactDOM.flushSync() 메서드는 Auto Batching 을 무시하고 즉시 DOM을 렌더링해줍니다.
React 에서는 공식적으로 해당 메서드의 사용을 추천하진 않으며 (de-opt case), 필요한 상황이 있을 경우에만 사용할 것을 권장합니다.

[2] 클래스형 컴포넌트에서 함수형 컴포넌트로 바뀐 이유

공부하면서 어떤 어려움이 있었나요?

TodoList 프로젝트 state 관리와 리랜더링 최적화

페어프로그래밍을 아주 하루종일 하면서 state 관리와 리랜더링에 대한 이슈를 끊임없이 마주쳤다. 정말 state가 많아지다 보니 헷갈리고, 그로 인해 불필요한 렌더링이 계속 발생하는 문제가 생겼다. 이에 대한 우리의 깊은 고민은 회고때 풀어보기로 하고..

recoil, redux 등의 상태관리 프로그램의 필요성을 뼈저리게 느끼는 순간이었다. state가 여기저기 흩어져있으니 감당하기가 매우 힘들었다.. 이번 weekly에 도입해볼까? 싶었지만, 아직은 contextAPI로 충분히 구현해보고, 다음주나 다른 주간에 또 이어서 하게 된다면 도입을 해보는 걸로..!!!

이 이슈 때문에 생각보다 기능구현을 다 못해서 아쉽다.

시간관리에 대한 고민

프로젝트를 함께 하다보면 정말 밤을 세도 될만큼 재미있어서 시간이 가는 줄 모르겠다. 그래서 오늘도 개인학습에 대한 시간을 많이 쏟지 못한 것 같아서 아쉬웠다. 개인의 성장에 이 둘 모두 매우 중요하기 때문에, 이 적절한 나만의 트레이드오프를 찾아야할 것같다.

내일의 나는 무엇을 공부해야 할까요?

• 페어프로그래밍 todolist 기능 구현 완료 (수정, 삭제, 로그인)
• 알고리즘 1문제
• reacd swiper, dnd 공부