[์ ๋ฆฌ] React Conf 2021
Opened this issue ยท 2 comments
sbyeol3 commented
"Great User Experience"
First Block ๐
Keynote
- ์ผ๋ฐ ๊ฐ๋ฐ์ ์ธ์๋ ๋์์ด๋๋ค์๊ฒ React๊ฐ ์ํฅ์ ๋ผ์น๋ค (framer)
- rooted in design principle, not programming
- React made components a mainstream part of UI dev => designers and developers speak "the same language"
Suspense
- Read data over the network as easily as props or state
- React 16-17์์์
Suspense
๋ client์์React.lazy
๋ฅผ ์ด์ฉํ์ฌ ์ฝ๋๋ฅผ ๋์ ์ผ๋ก ๋ก๋ฉํ๋ ๊ฒฝ์ฐ์ ์ฅ์ ์ด ์์์- SSR์์๋ ๋ถ๊ฐ๋ฅ
- React ์ฝ๋๋ top-down์ผ๋ก ์ฝ๊ธฐ ์ข์๋ฐ ๋น๋๊ธฐ ์ฝ๋๊ฐ ๋ค์ด๊ฐ๋ ์๊ฐ ๋ถ๊ฐ๋ฅํด์ง๋ค.
Reading the data
+Specifying the loading state
if (isLoading) return <Spinner />;
return (...);
// declarative way !
<Suspense fallback={<Spinner />}>
<List pageId={pageId} />
</Suspese>
"design centric idea"
- 16~17 : (c) Code Splitting with
React.lazy
- 18 : (c) Data fetching via compatible libs, like Relay (s) Streaming server rendering
- Next steps : General support for data fetching, Server components
- ๋ง์ ์ฌ๋๋ค์ด Relay๋ฅผ ์ฌ์ฉํ์ง๋ ์์, Suspense์ Relay๋ฅผ ๊ตฌํํ๊ณ ๋ฐ๋ณตํ๋ ๊ฒ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋๋ ์ฌ๋๋ ํ๋ ์ผ!
Concurrent Redering : "A behind-the-scenes capability in React that powers features like Suspense"
"what์ ์ง์คํ๋ผ, React๋ how์ ์ง์คํ๋ค . . "
- concurrent mode๊ฐ ์๋ concurrent features!
React without memo
Xuan Huang
React Forget
- auto memoizing compiler
- Research project in React Labs
- familiar React, still React
- ๋ฉ๋ชจ์ด์ ์ด์ ์ UX๋ฅผ ํฅ์์ํค์ง๋ง DX์๋ ์ข์ง ์๋ค.
- ์ฆ, React Forget์ DX๋ฅผ ์ข์ง ์๊ฒ ๋ง๋๋ ๋ฉ๋ชจ์ด์ ์ด์ ์ ์๋์ผ๋ก ๋ง๋ค์ด์ฃผ๋ ํ๋ก์ ํธ (์์ง ๊ณต๊ฐX)
example code
function TodoList({ visibility, themeColor }) {
const [todos, setTodos] = useState(initialTodos);
const handleChange = todo => setTodos(todos => getUpdated(todos, todo));
const filtered = getFiltered(todos, visibility);
return (
<div>
<ul>
{filtered.map(todo => (
<Todo key={todo.id} todo={todo} onChange={handleChange} />
))}
</ul>
<AddTodo setTodos={setTodos} themeColor={themeColor} />
</div>
);
}
function TodoList({ visibility, themeColor }) {
const [todos, setTodos] = useState(initialTodos)
let hasVisibilityChanged, hasThemeColorChanged, hasTodosChanged, memoCache
if (hasVisibilityChanged || hasThemeColorChanged || hasTodosChanged) {
const handleChange = memoCache[0] || (memoCache[0] = (todo) => setTodos((todos) => getUpdated(todos, todo)))
let filtered, jsx_todos
if (hasVisibilityChanged || hasTodosChanged) {
filtered = memoCache[1] = getFiltered(todos, visibility)
jsx_todos = memoCache[2] = (
<ul>
{filtered.map((todo) => (
<Todo key={todo.id} todo={todo} onChange={handleChange} />
))}
</ul>
)
} else {
filtered = memoCache[1]
jsx_todos = memoCache[2]
}
}
const jsx_addTodo = hasThemeColorChanged ? (memoCache[3] = <AddTodo setTodos={setTodos} themeColor={themeColor} />) : memoCache[3]
return (
<div>
{jsx_todos}
{jsx_addTodo}
</div>
)
}
Final Block
React 18 for External Store Libraries
Daishi Kato
- internal states :
props
context
useState
useReducer
- ์ด ์ธ์๋ ๋ชจ๋ external stores
- tearing : ์ ๋ณด์ ๋ถ์ผ์น๋ก ์ฌ์ฉ์์๊ฒ ์๋ชป๋ ์คํฌ๋ฆฐ์ ๋ณด์ฌ์ฃผ๋ ๋ฌธ์
useSyncExternalStore
: React 18์์ ๋์
useSyncExternalStore
subscribe
: get callback, return unsubscribe funcgetSnapshot
: return immutable value- ์ธ๋ถ ์คํ ์ด๋ฅผ ๊ตฌ๋ ํ๋ ํํ
Accessible Japanese Form Components with React
Tafu Nakazaki (SmartHR)
- ์ผ๋ณธ์์ ์ฌ์ฉํ๋ administrative docs๋ ๋ณต์กํ๊ณ ์ดํดํ๊ธฐ๊ฐ ์ด๋ ต๋ค (name, age, address, etc ...) ๐คฏ
- HR & management๋ ๋ณต์กํ๊ณ ๋ค์ํจ
- ํนํ ๋ฌธ์๋ฅผ ์ฝ๋ ๊ฒ์ด ์ด๋ ค์ด ๊ฒฝ์ฐ๋ ์์ ==> web based docs ! (์ ๊ทผ์ฑ์ด ์ฆ๊ฐ)
- Web Content Accessibility Guidelines (WCAG)
- React๋ฅผ ์ฌ์ฉํ์ฌ declarative UI ๊ตฌํ
sbyeol3 commented
SSR๊ณผ CSR
SSR (Server Side Rendering)
- ์๋ฒ์์ ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ค ํ์ด์ง๋ฅผ ๋ชจ๋ ๊ตฌ์ฑํ์ฌ ์ฌ์ฉ์์๊ฒ ํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ์
- ๋ชจ๋ ๋ฐ์ดํฐ๊ฐ ๋งคํ๋ ์๋น์ค ํ์ด์ง๋ฅผ ํด๋ผ์ด์ธํธ์๊ฒ ๋ฐ๋ก ๋ณด์ฌ์ค ์ ์์ผ๋ฉฐ ์ ์ฒด์ ์ผ๋ก ์ฌ์ฉ์์๊ฒ ๋ณด์ฌ์ฃผ๋ ์ปจํ ์ธ ์ ๊ตฌ์ฑ์ด ์๋ฃ๋๋ ์์ ์ ๋นจ๋ผ์ง๋ฉฐ, SEO ๋ํ ์ฝ๊ฒ ๊ตฌ์ฑํ ์ ์๋ค.
CSR (Client Side Rendering)
- ์ด๊ธฐ ์ ์ก๋๋ ํ์ด์ง์ ์๋๋ ๋น ๋ฅด์ง๋ง ์๋น์ค์์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ํด๋ผ์ด์ธํธ์์ ์ถ๊ฐ๋ก ์์ฒญํ์ฌ ์ฌ๊ตฌ์ฑํด์ผ ํ๋ฏ๋ก ์ ์ฒด์ ์ธ ํ์ด์ง ์๋ฃ ์์ ์ SSR๋ณด๋ค ๋๋ฆฌ๋ค.