목차

  1. 소개
  2. 주요 변경 사항들
  3. 참고

소개

React v16.0이 2017년 9월 26일 드디어 공식 배포 되었습니다. 이에 따라 이번 글에서는 React 16에서는 어떠한 주요 기능들이 추가되었는지 살펴 볼 수 있는 시간을 가져보고자 합니다.

주요 변경 사항들

  1. React Fiber
  2. React Portal
  3. Error Boundaries
  4. New Render Return Types
  5. Custom DOM Attributes

React Fiber

“fiber is the new reconciliation algorithm for react” - Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 Fiber는 React를 위한 새로운 Reconcilation 알고리즘입니다.

React 16에서 가장 큰 변화라고 하면 역시나 개선된 렌더링 알고리즘이 아닐까 싶습니다. 자세한 설명은 이번 포스트가 너무 길어지니 별도의 포스트로 이에 관해 다루도록 하겠습니다.

간단히 설명하자면 작업을 좀 더 효율적으로 분할하고 우선순위를 만들어 먼저 업데이트 되어야할 업데이트에 관해 정의해줄 수 있다고 합니다. 이 때 우선순위 업데이트를 주기위해서는 ReactDOM.unstable_deferredUpdates()를 사용하면 된다고 하네요.

React Portal

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component - React Blog Portal는 자식들을 부모 컴포넌트의 바깥 DOM에 렌더할 수 있는 최고의 방법을 제공해줍니다.

기존 React 컴포넌트의 구조는 매우 단순했었습니다. 부모 컴포넌트에 자식 컴포넌트들을 계속해서 렌더링해주는 방식이였는데요. 이번 업데이트를 통해 이제 자식 컴포넌트를 부모가 아닌 다른 바깥에 존재하는 DOM에 렌더링해줄 수 있게 되었습니다. 이러한 변화는 특히 modal과 같은 컴포넌트를 만들어 줄 때 많은 편의성을 줄 거 같네요.

건내받은 Child components를 바깥 DOM에 렌더링해주는 Modal component [예시 코드]:

class Modal extends React.Component {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      document.getElementById("modal-root")
    )
  }
}

Error Boundaries

이번 업데이트를 통해 React는 새로운 error 처리 방식을 제공해줬습니다. 기존의 경우 JavaScript 에러가 발생할 경우 전체 App이 먹통이 되는 문제들이 왕왕 생겼었는데 Error Boundary 컴포넌트를 만듦으로써 이와 같은 문제가 발생할 시 좀 더 유연하게 대처할 수 있게 됐습니다.

내부 컴포넌트에서 발생한 에러에 관해 처리하는 Error boundary component: [예시 코드]

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // Enter how to handle error
  }

  { ... }
}

New Render Return Types

새로운 Render type들이 추가됐습니다. 바로 String과 Array인데 이제는 단순 String이나 컴포넌트 Array를 만들기위해 불필요한 부모 컴포넌트를 굳이 만드는 수고를 덜 수 있을 듯 합니다. 저희 WantedLab 개발팀에서 가장 반겼었던 변화 중 하나이기도 하네요.

String Example:

render() {
  return "Hello world!";
}

Array Example:

render() {
  return [
    <li key="A">A</li>,
    <li key="B">B</li>,
    <li key="C">C</li>,
  ];
}

Custom DOM Attributes

기존의 React에서는 각각의 DOM에 허용가능한 attribute들을 white list로 만들어 이에 해당되지 않는 attribute들에 관해서는 삭제한채로 컴포넌트들을 만들었는데요. 이제는 이러한 custom attribute들을 이제는 허용되고 이제는 DOM에 삽입되어 생성된다고 하네요.

이는 React 파일 사이즈를 줄임과 동시에 실험적이거나 3rd party에서 제공해주는 라이브러리를 사용하는데 편의성을 주기 위함이라고 하네요. 이에 따라 data- 혹은 aria- 같은 attributes를 이전과 같이 사용할 수 있게 되었다고 하네요.

참고로 React 17 에서는 custom elements를 추가하기 위한 토론이 이어지고 있다고 하네요. 혹여나 관심이 있으신 분들은 의견을 제시할 수 있는 기회가 될 수 있겠네요.

참고