ReactEurope 2018

ReactEurope 2018 

주요 주제 및 샘플코드, 컴포넌트 소개

ReactEurope은 프랑스 파리에서 열리는 React 개발자 행사입니다. 2016년부터 시작하여 올해로 세번째 이며, 1000여명 이상 꽤 큰 행사입니다. 이번에 좋은 기회가 생겨 참석할 수 있었네요. 본 포스팅에서는 이 행사에서 다룬 세세한 기술적 내용보다는, 여기에서 소개된 컴포넌트의 간략한 정보와 링크, 그리고 주요 아젠다에 대한 샘플코드를 소개하도록 하겠습니다. 전체 내용은 아래 참고링크 란 - 유투브 채널 - 의 링크를 들어가면 보실 수 있습니다.

| 한줄요약

"Suspense"
2016년 Hoc, 2017년 Render Prop을 거쳐 올해는 온통 Suspense 이야기네요.

| 샘플코드  Repo

git clone https://github.com/aweary/react-europe-workshop
아래 설명에 나오는 샘플코드의 main repo는 위와 같습니다. git clone으로 코드를 내려받고 각각의 위치에서  npm run start  혹은 yarn start 를 치면 앱이 실행됩니다.

| 주요 주제

그럼 이번 컨퍼런스에서 다룬 주요 주제를 하나씩 간략하게 다뤄보도록 하겠습니다.

Context

React 16.3 부터 새로운 버전이 릴리즈 되었습니다. Prop Drilling의 어려움을 극복하기 위해 나왔으며 성능 저하의 걱정없이 적극적으로 사용해도 됩니다.
Context를 사용하는 대표 라이브러리는 다음과 같습니다.
  • react-router
  • redux
  • mobX
  • styled-component
  • etc... 사실은 다 씁니다. (Enact 에서도 많이 씁니다)
다음과 같은곳에서 Context를 유용하게 사용할 수 있습니다.
  • Theming
  • Data
  • Renderless Component
  • I18N (Internationalization)
  • Communication between arbitrarily nested subcomponents

Universal Component

컴포넌트를 유니버셜하게 만들려면, 
  • Uses react-primitives or react-native-web
  • Works on both web and native
  • Native first approach
  • Works by aliasing the react-native module
유니버셜 컴포넌트는 React와 React Native를 하나의 코드로 대응하는 방법을 제공합니다. React와 React Native의 가장 큰 차이점은 DOM 의 존재 유무입니다. 따라서 유니버셜 컴포넌트에서는 react-primitive를 통해 컴포넌트를 구성합니다.

Async Pattern

react async에 대한 이미지 검색결과
2017년에 Fiber 엔진 소개를 통해 이미 많이 들어 보셨을 겁니다. 이번에는 바뀐 라이프 사이클을 주요내용으로 하는 Async Rendering 업데이트를 다룹니다. 관련 포스팅은 https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
샘플코드에서 다루는 주요 내용은 다음과 같습니다.
  • async 요청을 위한 셋업은 componentDidMount에서 해야 합니다.
  • getDerivedStateFromProps 는 컴포넌트가 초기화 되거나 새로운 props을 받자마자 호출됩니다. componentDidUpdate와 함께쓰면 이전의 componentWillReceiveProps를 대체할 수 있습니다.
  • DOM이 업데이트 되기 전 값을 읽고 싶으면 getSnapshotBeforeUpdate를 사용하세요. componentDidUpdate와 함께쓰면 이전의 componentWillUpdate를 대체할 수 있습니다. 

React Suspense

샘플 코드를 실행할때, inspector를 띄우고 network를 느린상태로 시뮬레이션 하면 suspense를 더 자세히 볼 수 있습니다. 이미지 데이터가 다 내려올때 까지 렌더를 대기하고 데이터가 다 오면 한방에 그리는 것을 볼 수 있습니다.

Error Boundaries

Error boundary는 child 컴포넌트에서 발생한 스크립트 에러를 잡아내기 위한 React 컴포넌트 입니다. JSX declarative 표현에서 try() catch() 와 같은 목적으로 사용됩니다. componentDidCatch()를 사용하며 다음 링크를 참고하세요.  

Compound 컴포넌트

Compound 컴포넌트는 HTML의 <select> <option>과 같이 sub-component로 이루어진 컴포넌트 디자인 패턴입니다. sub component의 순서를 바꾸거나 넣고/빼고가 자유로운 장점이 있습니다.

| 컨퍼런스에서 소개된 컴포넌트들

컨퍼런스에서 정말 다양하고 많은 react-XXX 컴포넌트들이 소개되었습니다. 그 중 흥미로웠던 몇가지 컴포넌트를 링크와 함께 소개합니다.

React Virtualized

대용량의 list를 효과적으로 처리하기 위한 컴포넌트 입니다. grid, 테이블, 리스트등을 지원합니다. Enact 에서도 VirtualList, VirtualGridList 라고 하는 비슷한 컴포넌트를 지원합니다. 

Formidable 

Formidable 에서는 다양한 React 기반의 오픈소스 프로젝트를 진행합니다. 
  • Usable React in a web worker
  • Natural way to restrict developers from using DOM APIs
  • Leverage the same JS code from React Native core
  • Ecosystem - compatible escape hatch through the native module bridge
  • Supports advanced core features

RTL 컴포넌트 by airbnb

airbnb 에서 아랍 로케일 지원을 위한 RTL 컴포넌트를 공개하였습니다. Enact 의 i18n 모듈도 비슷한 기능을 지원합니다. 

UI Design to React Native

BuilderX 라고 하는 디자인툴을 소개하였습니다. 디자인을 하면 React Native 코드를 생성해 주고, Sketch 파일의 converting도 지원합니다.

ReasonReact

Reason으로 React컴포넌트를 생성하는 방법을 제공합니다. Reason은 OCaml로 만들어진 구문과 툴체인입니다. 
Navigation은 웹과 모바일 환경에서 크게 다른 방식으로 동작합니다. 컨퍼런스에서는 Navigation state와 url 핸들링이 어떻게 달라지는지 살펴보고, 두 가지 use case를 관리하는 모델로 React Navigation 을 소개했습니다. React Navigation API를 통해 iOS, Android, web에서 쉽게 Navigation을 관리합니다.

SVGR

SVG를 다루는 React 컴포넌트 입니다.
간략하게 나마 React유럽 컨퍼런스에서 다루어진 주요 주제와 컴포넌트등을 소개하였습니다. 이번 워크샵/컨퍼런스에서 느낀점은 정말 많은 개발자들이 React 환경에서 다양한 목표를 가지고 개발을 하고 있으며 그 과정에서 만들어진 컴포넌트들을 react-XXX 로 공개하고 있다는 점 입니다. 네트워킹을 통해 다양한 의견을 나눌 수 있는 기회가 어찌보면 컨퍼런스 기술발표 하나 더 듣는것 보다 소중한 시간이었습니다. 여러 React컨퍼런스 중에 가장 메인 이벤트로 ReactEurope이 자리잡아 가고 있는듯 한데, 기회가 된다면 꼭 한번 참석해 보시라고 강력하게 추천 드립니다.

| 참고링크

이 블로그의 인기 게시물

Enact 프레임워크를 오픈합니다.

Hello Enact #2 - CSS 추가하기

Hello Enact #1 - 기본