비동기 렌더링에 대한 업데이트

비동기 렌더링에 대한 업데이트

이 문서는 https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html 를 번역한 내용입니다.

1 년 넘게 리액트 팀은 비동기 렌더링을 구현하기 위해 노력해 왔다. 지난 달 아이슬랜드에서 열린 JSConf의 연설에서 Dan unveiled some of the exciting new possibilities async rendering unlocks. 이제 이러한 기능을 개발하면서 배웠던 교훈과 컴포넌트가 시작될 때, 비동기 렌더링을 위해 도움이 되는 몇 가지 방법을 공유하겠다.

우리가 배웠던 가장 큰 교훈 중 하나는 레거시 컴포넌트 라이프 사이클의 일부가 안전하지 않은 코딩 방법으로 장려하는 경향이 있다는 것이다. 그것들은 아래와 같다.

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

이러한 라이프 사이클 방법은 종종 오해되고 미묘하게 오용 되었다. 또한 비동기 렌더링을 사용하면 오용 가능성이 더 커질 수 있다. 이 때문에 앞으로 출시 될 버전에는 이러한 라이프 사이클에 “UNSAFE_“라는 접두사를 추가 할 것이다. (여기서 “UNSAFE”는 보안을 의미하는 것이 아니라 이러한 라이프 사이클을 오용하는 코드에서는 비동기 렌더링이 활성화되는 React 향후 버전에서 버그가 발생할 가능성이 높다는 것을 의미한다.)

Gradual Migration Path

리액트는 symantic versioning을 따르므로 변경 사항은 점진적일 것이다. 현재 계획은 다음과 같다.

  • 16.3: 안전하지 않은 라이프 사이클에 대한 별칭 소개, UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate. (이 릴리즈에서는 이전 라이프 사이클 이름과 새로운 별칭이 모두 동작한다.)

  • 향후 16.x release: componentWillMount,componentWillReceiveProps,componentWillUpdate에 대한 제거 예정 경고가 활성화된다. (이 릴리즈에서는 이전 라이프 사이클 이름과 새 별칭이 모두 작동하지만 이전 이름은 DEV 모드 경고를 기록한다.)

  • ** 17.0 ** :componentWillMount,componentWillReceiveProps 및componentWillUpdate가 제거됨. (오직 “UNSAFE_“으로 시작하는 새로운 라이프 사이클만이 동작 할 것이다.)

리액트 개발자라면 아직 레거시 메소드에 대해서 아무 것도 하지 않아도 된다. 곧 출시 될 버전 16.3의 주요 목적은 사용 중지 경고보다 오픈 소스 프로젝트 관리자가 먼저 라이브러리를 업데이트 할 수 있게 하는 것이다. 이러한 경고는 향후 16.x 릴리스가 될 때까지 활성화되지 않는다.

Facebook에서는 50,000 개가 넘는 리액트 컴포넌트를 유지하고 있으며 당장 모두 새로 작성할 계획이 없다. 마이그레이션에는 시간이 꽤 걸리는 것을 잘 알고 있다. 우리는 리액트 커뮤니티의 모든 사람들과 함께 점진적인 마이그레이션을 할 것이다.

Migrating from Legacy Lifecycles

리액트 16.3에 소개된 새로운 컴포넌트 API를 사용하기를 원한다면 (또는 미리 라이브러리를 업데이트 하려고 하는 운영자인 경우) 여기에 컴포넌트에 대해 다르게 생각해 볼 수 있는 몇 가지 예가 있다. 일반적인 작업에서 향후 문제가 될 수 있는 라이프 사이클를 피하기 위한 “레시피”를 문서에 점차 추가 할 계획이다.

시작하기 전에 버전 16.3에서 계획된 라이프 사이클 변경 사항에 대한 간략한 개요는 다음과 같다.

  • 다음의 라이프 사이클 별칭을 추가: UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps, UNSAFE_componentWillUpdate. (이전 라이프 사이클 이름과 새 별칭 모두 지원)

  • 두 가지 새로운 라이프 사이클을 소개: static getDerivedStateFromProps, getSnapshotBeforeUpdate.

새로운 라이프 사이클: getDerivedStateFromProps

class Example extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    // ...
  }
}

새로운 static getDerivedStateFromProps 라이프 사이클은 컴포넌트가 인스턴스화 된 후, 새 props를 받았을 때 호출된다. state를 갱신하는 객체를 반환할 수 있고, 새로운 props가 state 갱신을 필요로 하지 않음을 나타내기 위해 null을 반환할 수도 있습니다.

componentDidUpdate와 함께 이 새로운 라이프 사이클은 레거시 componentWillReceiveProps 실행 후에 실행된다.

새로운 라이프 사이클: getSnapshotBeforeUpdate

class Example extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
  }
}

새로운 getSnapshotBeforeUpdate 라이프 사이클은 수정이 발생하기 바로 직전에 호출된다. (예: DOM이 업데이트되기 전) 이 라이프 사이클의 반환 값은 세 번째 매개 변수로 componentDidUpdate에 전달됩니다. (이 라이프 사이클은 많이 필요하지 않지만, 렌더링되는 동안 수동으로 스크롤 위치를 유지해야할 때와 같은 경우에는 유용할 수 있다.)

componentDidUpdate와 함께 이 새로운 라이프 사이클은 레거시 componentWillUpdate 실행 후에 실행된다.

이 gist에서 타입 표기를 확인할 수 있다.

아래에서 이 두 가지 라이프 사이클을 어떻게 사용할 수 있는지에 대한 예제를 살펴 보자.

Examples

  • [state 초기화]
  • [외부 데이터 가져오기]
  • [이벤트 리스터 추가 (혹은 구독자)]
  • [props 기반의 state 갱신]
  • [외부 콜백함수 실행]
  • [Side effects on props change]
  • [Fetching external data when props change]
  • [Reading DOM properties before an update]

Note

For brevity, the examples below are written using the experimental class properties transform, but the same migration strategies apply without it.

Written on January 1, 2018