Poco pocojang

React 18 미리보기

즉시 사용 가능한 개선점

코드의 변경 없이 React 18로 업데이트하자마자 얻을 수 있는 개선점에 대해서 간단히 이해해보자.

Automatic batching for fewer renders

제목에서도 알 수 있는 것처럼 간단히 설명하자면, React 18 이전에는 오직 이벤트 핸들러 안에서 발생한 setState만 모아서 처리 했지만, React 18 이후부터는 promise, setTimeout 등에서 발생한 연속적인 setState도 모아서 처리될 수 있도록 개선되었다는 내용이다.

위 기능을 피하고 싶다면 react-dom의 flushSync api를 이용하면 모아서 처리하지 않고 하나의 setState가 바로 re-render를 일으키도록 명시적으로 코드를 추가할 수 있다.

들어가며

지난 JavaScript, Front-End 발표 주제는 this 였지만, 공부하다 보니 실행 컨텍스트에 대한 내용이 선행되야 할 것 같아 실행 컨텍스트에 대하여 발표를 하게 되었다.

여러 자료와 책을 참고하며 공부를 하고 있음에도 내용이 잘 와닿지 않아 참고1을 참고2, 참고3, 참고4, 책 인사이드 자바스크립트, Poiema Web을 참고하여 번역을 해보고자 한다. 추가적으로 내가 여러 자료를 찾아보면서 알게 된 내용들도 덧붙일 것이다.

실행 컨텍스트, Execution Context(이하 EC) 라는 개념은 나에겐 낯설었기에 나와 같은 사람들이 있을 것 같아 흔히들 아는 콜스택 을 시작으로 글을 써보도록 하겠다.

Avoiding HOC; Favoring render props

The React community is moving away from HOC (higher order components) in favor of render prop components (RPC). For the most part, HOC and render prop components solve the same problem. However, render prop components provide are gaining popularity because they are more declarative and flexible than an HOC.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.


	// when T is any\|unknown, Y is returned, otherwise N
	type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

	// when T is never, Y is returned, otherwise N
	type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

	// when T is a tuple, Y is returned, otherwise N
	// valid tuples = [string], [string, boolean],
	// invalid tuples = [], string[], (string \| number)[]

	HTML
	- Semantic HTML
	- Event delegation
	- Accessibility / ARIA

	CSS
	- Specificity
	- Pseudo-elements
	- Pseudo-selectors
	- Combinators

	Data Structures
	- Stacks
	- Queues
	- Linked lists
	- Graphs
	- Trees
	- Tries

	Concepts
	- Big O Notation


	// Engine
	const React = {
	index: 0,
	state: [],
	useEffect: (callback, dependencies) => {
	const cachedIndex = React.index;
	const hasChanged = dependencies !== React.state[cachedIndex];
	if (dependencies === undefined \|\| hasChanged) {
	callback();

	// 이 함수는 파라미터로 액션의 타입 (예: GET_USER) 과 Promise 를 만들어주는 함수를 받아옵니다.
	export function createAsyncDispatcher(type, promiseFn) {
	// 성공, 실패에 대한 액션 타입 문자열을 준비합니다.
	const SUCCESS = `${type}_SUCCESS`;
	const ERROR = `${type}_ERROR`;

	// 새로운 함수를 만듭니다.
	// ...rest 를 사용하여 나머지 파라미터를 rest 배열에 담습니다.
	async function actionHandler(dispatch, ...rest) {
	dispatch({ type }); // 요청 시작됨

	import { AxiosResponse } from "axios";

	// the kind of data I expect from the AJAX request...
	interface AuthData {
	access_token?: string;
	refresh_token?: string;
	}
	// ... a type dedicated to the Axios response...
	type AuthResponse = AxiosResponse<AuthData>;