docs(blog): SEO 기술 팁 포스트 추가 - React Compiler 자동 메모이제이션 (3개 언어)

Author: okai

_posts/2026-03-23-react-compiler-automatic-memoization-en.md

@@ -0,0 +1,78 @@
+---
+layout: post
+title: "React Compiler: Drop useMemo and useCallback, Let the Compiler Handle It"
+date: 2026-03-23 09:00:00 +0900
+categories: [Development, Tips]
+tags: [React, React Compiler, useMemo, useCallback, Performance]
+author: "Kevin Park"
+lang: en
+excerpt: "React Compiler automatically memoizes your components at build time, eliminating the need for manual useMemo and useCallback in most cases."
+---
+
+## Problem
+
+Manual memoization with `useMemo` and `useCallback` has long been a pain point in React development. Forget one, and you get unnecessary re-renders. Add them everywhere, and you're stuck managing dependency arrays.
+
+```jsx
+// This was everywhere in every component
+const filteredList = useMemo(() => {
+  return items.filter(item => item.active);
+}, [items]);
+
+const handleClick = useCallback((id) => {
+  setSelected(id);
+}, []);
+```
+
+Deciding what to memoize was a constant cognitive overhead.
+
+## Solution
+
+React Compiler v1.0 handles memoization automatically at build time.
+
+For Next.js, it's a one-liner:
+
+```js
+// next.config.js
+const nextConfig = {
+  reactCompiler: true,
+};
+
+module.exports = nextConfig;
+```
+
+For existing projects, use the Babel plugin:
+
+```bash
+npm install -D babel-plugin-react-compiler
+```
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler'],
+  ],
+};
+```
+
+Now you can write plain code and let the compiler optimize:
+
+```jsx
+// The compiler inserts memoization automatically
+const filteredList = items.filter(item => item.active);
+
+const handleClick = (id) => {
+  setSelected(id);
+};
+```
+
+No manual `useMemo` or `useCallback` needed. The compiler analyzes your components and inserts memoization where it matters.
+
+## Key Points
+
+- React Compiler analyzes components at build time and applies automatic memoization
+- Eliminates the need for `useMemo`, `useCallback`, and `React.memo` in 95%+ of cases
+- Next.js: just set `reactCompiler: true` in your config
+- Existing manual memoization still works — no conflicts
+- Your code must follow React's rules (pure functions, immutability) for the compiler to optimize effectively

_posts/2026-03-23-react-compiler-automatic-memoization-ja.md

@@ -0,0 +1,80 @@
+---
+layout: post
+title: "React Compilerを導入したらuseMemoとuseCallbackが不要になった話"
+date: 2026-03-23 09:00:00 +0900
+categories: [Development, Tips]
+tags: [React, React Compiler, useMemo, useCallback, パフォーマンス最適化]
+author: "Kevin Park"
+lang: ja
+excerpt: "React Compilerがビルド時に自動でメモ化を行うため、useMemoやuseCallbackを手動で書く必要がほぼなくなりました。"
+---
+
+## 問題
+
+Reactでパフォーマンスを最適化するために、`useMemo`や`useCallback`を至る所に書くのが日常でした。
+書き忘れると不要な再レンダリングが発生し、書いたら書いたで依存配列の管理が大変です。
+
+```jsx
+// すべてのコンポーネントにこのようなコードがありました
+const filteredList = useMemo(() => {
+  return items.filter(item => item.active);
+}, [items]);
+
+const handleClick = useCallback((id) => {
+  setSelected(id);
+}, []);
+```
+
+「これはメモ化すべきか？」と毎回悩むのも負担でした。
+
+## 解決方法
+
+React Compiler v1.0のリリースにより、この悩みが解消されました。
+ビルド時にコンパイラが自動的にメモ化を挿入してくれます。
+
+Next.jsでの設定は非常に簡単です。
+
+```js
+// next.config.js
+const nextConfig = {
+  reactCompiler: true,
+};
+
+module.exports = nextConfig;
+```
+
+既存プロジェクトにはBabelプラグインで導入できます。
+
+```bash
+npm install -D babel-plugin-react-compiler
+```
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler'],
+  ],
+};
+```
+
+これで、先ほどのコードをシンプルに書き換えられます。
+
+```jsx
+// コンパイラが自動的に最適化してくれます
+const filteredList = items.filter(item => item.active);
+
+const handleClick = (id) => {
+  setSelected(id);
+};
+```
+
+`useMemo`や`useCallback`を削除しても、コンパイラがビルド時に自動でメモ化を適用します。
+
+## ポイント
+
+- React Compilerはビルド時にコンポーネントを解析し、自動的にメモ化を適用します
+- `useMemo`、`useCallback`、`React.memo`を手動で書く必要が95%以上なくなります
+- Next.jsでは`reactCompiler: true`の1行で設定完了です
+- 既存のuseMemo/useCallbackコードもそのまま動作します（競合なし）
+- コンパイラが最適化できるよう、Reactのルール（純粋関数、不変性）を守ることが重要です

_posts/2026-03-23-react-compiler-automatic-memoization.md

@@ -0,0 +1,80 @@
+---
+layout: post
+title: "React Compiler 적용했더니 useMemo, useCallback 다 지워도 되더라"
+date: 2026-03-23 09:00:00 +0900
+categories: [Development, Tips]
+tags: [React, React Compiler, useMemo, useCallback, 성능최적화]
+author: "Kevin Park"
+lang: ko
+excerpt: "React Compiler가 자동으로 메모이제이션을 해주면서 useMemo, useCallback을 직접 쓸 일이 거의 없어졌다. 설정법과 실무 적용기."
+---
+
+## 문제
+
+React에서 성능 최적화한다고 useMemo, useCallback을 덕지덕지 붙이는 게 일상이었다.
+근데 솔직히 이거 빼먹으면 리렌더링 폭발하고, 넣으면 넣는 대로 의존성 배열 관리가 지옥이었다.
+
+```jsx
+// 이런 코드가 컴포넌트마다 있었다
+const filteredList = useMemo(() => {
+  return items.filter(item => item.active);
+}, [items]);
+
+const handleClick = useCallback((id) => {
+  setSelected(id);
+}, []);
+```
+
+매번 "이거 메모이제이션 해야 하나?" 고민하는 것도 피곤했다.
+
+## 해결
+
+React Compiler v1.0이 나오면서 이 고민이 사라졌다.
+빌드 타임에 컴파일러가 알아서 메모이제이션을 넣어준다.
+
+Next.js에서 설정하는 법은 간단하다.
+
+```js
+// next.config.js
+const nextConfig = {
+  reactCompiler: true,
+};
+
+module.exports = nextConfig;
+```
+
+기존 프로젝트에 Babel 플러그인으로 넣을 수도 있다.
+
+```bash
+npm install -D babel-plugin-react-compiler
+```
+
+```js
+// babel.config.js
+module.exports = {
+  plugins: [
+    ['babel-plugin-react-compiler'],
+  ],
+};
+```
+
+이제 아까 그 코드를 이렇게 바꿔도 된다.
+
+```jsx
+// 컴파일러가 알아서 최적화해준다
+const filteredList = items.filter(item => item.active);
+
+const handleClick = (id) => {
+  setSelected(id);
+};
+```
+
+useMemo, useCallback을 지워도 컴파일러가 빌드할 때 자동으로 메모이제이션을 삽입한다.
+
+## 핵심 포인트
+
+- React Compiler는 빌드 타임에 컴포넌트를 분석해서 자동으로 메모이제이션을 적용한다
+- useMemo, useCallback, React.memo를 직접 쓸 필요가 95% 이상 사라진다
+- Next.js는 `reactCompiler: true` 한 줄이면 끝이다
+- 기존에 useMemo/useCallback 쓰던 코드도 그대로 동작한다 (충돌 없음)
+- 단, 컴파일러가 최적화할 수 있으려면 React의 규칙(순수 함수, 불변성)을 잘 지켜야 한다