React Conf 2021: 키노트 요약
Published in
3 min readMar 30, 2022
디자이너와 개발자 사이의 소통
- 디자이너와 개발자가 서로 다른 언어로 이야기 하면, 이해하기 힘든 UX가 나온다. 이럴 때 도움이 되는 것이 리액트다.
- 리액트는 기술이 아니라, 기술로 할 수 있는 것을 논한다.
- 리액트의 목표: 보다 쉽게 훌륭한 UX를 만들기
Suspense
- props나 state 처럼 리액트 데이터를 네트워크를 통해 빠르게 전달받기. 컴포넌트의 정의를 확장한다.
- 16, 17 버전: suspense는 클라이언트에서만 동작했다. useEffect는 데이터 받아오기 부적절했다. 대신, 아폴로 클라이언트 같은 외부 라이브러리를 사용한다.
- 데이터 항목을 받아오는 것과 로딩 상태를 보여주는 코드는 같은 컴포넌트 안에 있을 필요가 없다. 로딩 상태를 설정하면 추가 비용이 들어간다.
- 이 둘을 분리하자. 로딩 불리언 값은 더 이상 사용하지 않는다! 데이터 불러오는 동작이 동기든 비동기든 상관하지 않는다.
- 로딩 상태 정의는 어떡하나? 가장 가까운 부모 컴포넌트의 <Suspense />를 사용한다. JSX 안에 로딩 상태를 놓는 것이 올바른 위치라 생각한다.
몇가지 흥미로운 기술적 영향
- Suspense는 형식에 상관 없이 비동기 데이터를 제어하는 데 사용한다.
- 16–17: 코드 나누기(code splitting)을 위한 JS 번들 로딩
- 18: 서버에서도 동작한다. 스트리밍 서버 렌더링을 하면, 서버에서 fallback 스켈레톤을 먼저 내보낸다.
- 18: Relay 같은 호환 라이브러리를 통한 데이터 불러오기
- 그렇지만 Relay는 사용자가 많지 않다 😅 다음으로 할 일은, 데이터 불러오기 범용 지원. 리액트 생태계에서 널리 사용 가능해지기를 바란다.
새로운 기능
- 자동 업데이트 배치(batching)
- useId: 임의 id를 생성하는 훅. aria 속성 값 생성에 사용해 접근성 대응에 쓰면 좋다.
- 사용 선택이 가능한(opt-in) 새로운 기능: startTransition, useDefferedValue, 스트리밍 SSR with Suspense
- 병렬 렌더링. 최종 사용자에게는 어떤 영향을 줄까? 이는 리액트 내부 기능이다. 컴포넌트 작성 시에는 신경쓸 필요가 없다. 내부에서 채택한 높은 기준을 충족하기까지 시간이 오래 걸려 출시가 늦어졌다.
- 병렬 모드: 폐기한 채택 전략
흥미진진한 기능을 향한 첫 걸음은 버전 18로 업그레이드 하는 것
- 서버 컴포넌트: 서버에서만 실행된다. 서버 쪽의 데이터 소스에 직접 접근한다. 번들 사이즈에 영향이 없다. Hydrogen과 Next.js는 서버 컴포넌트에 의존한다.
- 병렬 렌더링: 리액트 네이티브에서 발견한 문제점에서 영감을 받음.
- 리액트는 모든 플랫폼을 위한 것이다. 단순한 라이브러리가 아닌, UI 제작 패러다임이다.
- 리액트 네이티브에도 리액트 18을 적용할 예정!
- 리액트 비전: 클라이언트와 서버 사이를 흠없이 연결한다. 양쪽에 대한 기술 선택 고민이 없도록.
