[정리] React Conf 2021

[sbyeol3]

"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 func
• getSnapshot : 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]

SSR과 CSR

참고

SSR (Server Side Rendering)

• 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식
• 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있으며 전체적으로 사용자에게 보여주는 컨텐츠의 구성이 완료되는 시점은 빨라지며, SEO 또한 쉽게 구성할 수 있다.

CSR (Client Side Rendering)

• 초기 전송되는 페이지의 속드는 빠르지만 서비스에서 필요한 데이터를 클라이언트에서 추가로 요청하여 재구성해야 하므로 전체적인 페이지 완료 시점은 SSR보다 느리다.

[sbyeol3]

React Suspense docs

It's a mechanism for data fetching libraries to communicate to React that the data a component is reading is not ready yet

• React 16.6 버전에서 추가
• 데이터를 비롯한 무엇이든 "기다릴" 수 있도록 해주는 새로운 feature