z1zon · cyjo9603 · Apr 7, 2024 · Apr 7, 2024 · Apr 7, 2024 · Apr 15, 2024
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/.eslintrc.cjs b/99. 퐁당퐁당/7회차/찬영/react-19-example/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/.gitignore b/99. 퐁당퐁당/7회차/찬영/react-19-example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/README.md b/99. 퐁당퐁당/7회차/찬영/react-19-example/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/index.html b/99. 퐁당퐁당/7회차/찬영/react-19-example/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/package.json b/99. 퐁당퐁당/7회차/찬영/react-19-example/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-19-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0-canary-fd0da3eef-20240404",
+    "react-dom": "^19.0.0-canary-fd0da3eef-20240404"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/App.jsx b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/App.jsx
@@ -0,0 +1,25 @@
+import UseStatusForm from "./components/UseStatusForm";
+import UseStateForm from "./components/UseStateForm";
+import Optimistic from "./components/Optimistic/Optimistic";
+
+function App() {
+  return (
+    <div>
+      <section>
+        <h1>use form status</h1>
+        <UseStatusForm />
+      </section>
+      <hr />
+      <section>
+        <h1>use form state</h1>
+        <UseStateForm />
+      </section>
+      <section>
+        <h1>use optimistic</h1>
+        <Optimistic />
+      </section>
+    </div>
+  );
+}
+
+export default App;
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/Optimistic/Optimistic.jsx b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/Optimistic/Optimistic.jsx
@@ -0,0 +1,48 @@
+import { useOptimistic, useState } from "react";
+
+const DEFAULT_MESSAGES = [{ text: "Hey, I am initail", sending: false, key: 1 }];
+
+const Optimistic = () => {
+  const [messages, setMessages] = useState(DEFAULT_MESSAGES);
+  const [optimisticMessages, addOptimisticMessage] = useOptimistic(messages, (state, newMessage) => [
+    ...state,
+    { text: newMessage, sending: true },
+  ]);
+
+  async function handleSendFormData(formData) {
+    const sentMessage = await fakeDelayAction(formData.get("message"));
+    setMessages((messages) => [...messages, { text: sentMessage }]);
+  }
+
+  const handleSubmit = async (userData) => {
+    addOptimisticMessage(userData.get("username"));
+
+    await handleSendFormData(userData);
+  };
+
+  return (
+    <>
+      {optimisticMessages.map((message, index) => (
+        <div key={index}>
+          {message.text}
+          {!!message.sending && <small> (Sending...)</small>}
+        </div>
+      ))}
+      <form action={handleSubmit}>
+        <h3>OptimisticState Hook</h3>
+        <div>
+          <label>Username</label>
+          <input type="text" name="username" />
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+};
+
+export default Optimistic;
+
+async function fakeDelayAction(message) {
+  await new Promise((res) => setTimeout(res, 3000));
+  return message;
+}
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/Optimistic/index.js b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/Optimistic/index.js
@@ -0,0 +1 @@
+export { default } from "./Optimistic";
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStateForm/UseStateForm.jsx b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStateForm/UseStateForm.jsx
@@ -0,0 +1,26 @@
+import { useFormState } from "react-dom";
+
+const UseStateForm = () => {
+  const [message, formAction] = useFormState(handleSubmit, null);
+
+  return (
+    <form action={formAction}>
+      <label>Name</label>
+      <input type="text" name="username" />
+      <button>Submit</button>
+      {message && <h3>{message.text}</h3>}
+    </form>
+  );
+};
+
+const handleSubmit = (prevState, queryData) => {
+  const name = queryData.get("username");
+  console.log(prevState);
+
+  if (name === "Chanyeong") {
+    return { success: true, text: "Welcome" };
+  }
+  return { success: false, text: "Error" };
+};
+
+export default UseStateForm;
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStateForm/index.js b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStateForm/index.js
@@ -0,0 +1 @@
+export { default } from "./UseStateForm";
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStatusForm/Submit.jsx b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStatusForm/Submit.jsx
@@ -0,0 +1,9 @@
+import { useFormStatus } from "react-dom";
+
+const Submit = () => {
+  const { pending } = useFormStatus();
+
+  return <button disabled={pending}>{pending ? "Submitting..." : "Submit"}</button>;
+};
+
+export default Submit;
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStatusForm/UseStatusForm.jsx b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStatusForm/UseStatusForm.jsx
@@ -0,0 +1,13 @@
+import Submit from "./Submit";
+
+const UseStatusForm = () => {
+  return (
+    <form action={handleSubmit}>
+      <Submit />
+    </form>
+  );
+};
+
+const handleSubmit = () => new Promise((res) => setTimeout(res, 3000));
+
+export default UseStatusForm;
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStatusForm/index.js b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/components/UseStatusForm/index.js
@@ -0,0 +1 @@
+export { default } from "./UseStatusForm";
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/src/main.jsx b/99. 퐁당퐁당/7회차/찬영/react-19-example/src/main.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/99. 퐁당퐁당/7회차/찬영/react-19-example/vite.config.js b/99. 퐁당퐁당/7회차/찬영/react-19-example/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
@@ -0,0 +1,49 @@
+# react 19 정리
+
+## 주 변화
+
+### concurrent rendering
+
+- react18이 synchronous rendering에 의존했던것과 달리, react19는 동시성을 활용해, UI 업데이트를 더 작은 비동기 작업으로 세분화함
+- 우선순위가 높은 업데이트를 먼저 처리해 더 매끄럽고 유연한 사용자 경험을 제공함
+
+### suspense for data fetching reinvented
+
+- 데이터를 불러올때 사용하는 suspense에 대한 성능 개선
+- suspense가 concurrent rendering과 원활하게 통합되기 때문에 최적의 성능을 위해 데이터를 가져오는 작업과 렌더링을 동시에 진행할 수도 있음
+
+### server side rendering 개선
+
+- streaming과 concurrent가 발전했다는 점을 활용해 더 빠른 TTFB와 향상된 SEO 성능을 제공함
+
+> TTFB: Time to First Byte로 브라우저가 페이지를 요청한 시점과 서버로부터 첫 번째 정보 byte를 수신한 시점 사이의 시간
+
+### 점진적 도입 가능
+
+- 기존 react 생태계가 다양하다는 사실을 인지하고, 개발자가 react 프로젝트를 점진적으로 upgrade할 수 있음
+
+### performance optimization
+
+- react19는 runtime 효율은 높이고 번들 사이즈는 줄이기 위해 다양한 성능 최적화 기술을 사용함
+- 최적화된 조정 알고리즘부터 지연 컴포넌트 로딩에 이르기까지, 더 빠른 렌더링과 효율적인 메모리 관리 기능을 제공하기 위해 노력
+- 새로운 scheduler architecture를 도입해, 렌더링 우선순위와 resource활용도를 세밀하게 제어하고 성능 튜닝을 강화할 수 있도록 도움
+
+### debugging developer tool
+
+- react19를 사용하는 개발자는 component life cycle, state management, performance bottleneck 등에 대한 상세한 insight를 확보하고, 앱을 보다 효과적으로 최적화 할 수 있음
+- time-slicing profiler와 flame charts와 같은 기능을 통해 이전보다 향상된 정밀도로 성능 관련 문제를 진단하고 해결하도록 지원
+
+#### time-slicing profiler
+
+#### flame chart
+
+### 핵심 기능
+
+#### react compiler (experimental)
+
+- react를 더 작고 최적화된 javascript로 compile함으로써, TTFB 및 UX 개선할 수 있음
+- 아직 experimental 단계로, 널리 사용할 준비는 되어있지 않음
+
+#### reference
+
+- https://kmong.com/article/1852--React-19-%EC%B5%9C%EC%8B%A0-%EA%B8%B0%EB%8A%A5-%ED%95%9C%EB%88%88%EC%97%90-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0