[React] React 18버전의 새로운 기능들 (원티드 프리온보딩 사전과제)

https://www.wanted.co.kr/events/pre_challenge_fe_8

 

오는 4월 원티드 프리온보딩 프론트엔드 챌린지에 지원했고, 사전과제가 있어서 겸사겸사 오랜만에 포스팅하려고 한다.

 

이번 프리온보딩 챌린지 기간은 다음과 같다.

챌린지 일정

3.15 (수) ~ 3.30 (목)	참가 신청 및 사전 미션 수행
4.3 (월) ~ 4.16 (일)	기술 역량 향상 (2주) 월요일 & 목요일 20시 Online (3시간)
4.17 (월) ~ 5.14 (일)	취업 챌린지 (4주)

 

이번에 처음으로 지원해봤는데 단기간에 취업하는 챌린지고, 원티드를 통해 20건 이상을 지원한 챌린저들에게는 상금을 나누어주는 혜택도 있다고 한다.

이제 막 데브코스 수료한 나에게는 안할 이유가 없어서 데브코스 동기들에게도 알려주고 바로 지원하게 되었다.

 

이제 사전과제와 React 18버전의 새로운 기능들에 대해 알아보자.

 

1. React Lifecycle에 대해 간단히 설명해주세요.

리액트 라이프 싸이클은 크게 mount(생성), update(업데이트), unmount(제거) 세가지 단계의 생성주기를 갖습니다. 클래스형 컴포넌트에서는 라이프사이클 메서드를 활용하고, 함수형 컴포넌트에서는 Hook을 사용합니다.

mount(생성) 단계에서는 말그대로 컴포넌트를 생성합니다. contructor메서드로 생성하고 render메서드로 UI를 렌더링합니다. 그리고 컴포넌트의 첫번째 렌더링이 마치면 componentDidMount메서드가 실행됩니다.

update(업데이트) 단계에서는 getDerivedStateFromProps메서드로 props가 바뀜에 따라 state값에도 변화를 줄때 사용하고, componentDidUpdate메서드로 컴포넌트를 업데이트 합니다.

unmount(제거) 단계에서는 componentWillUnmount메서드를 컴포넌트가 화면에서 사라지기 직전에 호출되고, componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야합니다.

 

(라이프 사이클에 대해서 이 글에 좀 더 자세히 정리해 놓았다.)

 

2. React18에서 업데이트 된 기능에 대해 설명해주세요

자동배치 (Automatic Batching)

배칭(Batching)이란 효율적인 렌더링 퍼포먼스를 위하여 state 업데이트를 하나의 업데이트로 그룹화하는 것을 의미합니다. 18버전 이전의 React는 Event Handler만이 state 업데이트를 배칭 처리했습니다. 하지만 18버전 이후로는 Event Handler뿐만 아니라 promise, setTimeout, native event handler 등 다양한 로직에서도 배칭 작업이 가능하게 되었습니다.

 

새로운 RootAPI등장

18버전 이후의 새로운 Root API는 ReactDOM.createRoot으로 18버전에서 사용하는 루트를 생성할 수 있는데, 새로운 Root API를 통해서 React 18 버전의 새로운 기능 및 API를 사용할 수 있습니다.

// 18v 이전의 루트
ReactDOM.render(, document.getElementById(‘root’));

// 18v 이후의 루트 API
import * as ReactDOMClient from ‘react-dom/client’;

const container = document.getElementById(‘app’);
const root = ReactDOMClient.createRoot(container);
root.render();

새로운 RootAPI를 도입하고 개선된 점은, 루트 컨테이너에 변화가 없더라도 렌더하기 위해서 루트를 반드시 체크하고 루트를 통과하는 과정을 거쳐야 했지만 18버전부터는 이런 무의미한 반복되는 과정이 개선되었습니다.

 

Transition(전환)

전환은 긴급 업데이트와 긴급하지 않은 업데이트를 구분하기 위한 React 새로운 개념입니다.

• 긴급 업데이트 : 직접적인 상호작용 반영 (타이핑, 오버, 스크롤링 등)
• 전환 업데이트(긴급하지 않은 업데이트) : 하나의 뷰에서 다른 뷰로의 UI전환

즉, 긴급 업데이트는 사용자의 입력에 따라 즉각적으로 반응을 보여주지 않으면 문제(화면 멈춤, 렉 등)가 있다고 느끼는 영역이고, 전환 업데이트는 즉각적인 반응을 기대하지 않는 영역입니다.

18버전 이전에는 모든 상태가 긴급 업데이트로 적용하기 때문에 setTimeout이나 throttle, debounce등의 테크닉을 사용해 긴급 업데이트 방해를 우회하는것이 최선이었지만 18버전부터는 startTrasitionAPI를 제공함으로써 전환 업데이트를 명시적으로 구분할 수 있게 되었습니다.

 

3. React18에서 추가된 hook들에 대해 설명해주세요

useId

클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅

 

useTransition

일부 상태 업데이트를 긴급하지 않은것으로 표시할 수 있습니다. 이것으로 표시되지 않은 상태 업데이트는 기본적으로 긴급 업데이트입니다.

function App() {
  const [resource, setResource] = useState(initialResource)
  const [startTransition, isPending] = useTransition({ timeoutMs: 3000 })
  return (
    <>
      <button
        disabled={isPending}
        onClick={() => {
          startTransition(() => {
            const nextUserId = getNextId(resource.userId)
            setResource(fetchProfileData(nextUserId))
          })
        }}
      >
        Next
      </button>
      {isPending ? 'Loading...' : null} <ProfilePage resource={resource} />
    </>
  )
}

startTransition : 함수로, 리액트에 어떤 상태변화를 지연하고 싶은지 지정할 수 있다.

isPending : boolean값으로 진행여부를 나타낸다. 트랜지션이 진행중인지 알 수 있다.

timeoutMs : 최대 3초간 이전 화면을 유지한다.

 

useDeferredValue

급하지 않은 부분의 재랜더링을 지연할 수 있습니다. 고정된 지연 시간이 없으므로, 리액트는 첫 번째 랜더링이 반영되는 즉시 지연 랜더링을 시도합니다.

import { useDeferredValue } from 'react'

const deferredValue = useDeferredValue(value, {
  timeoutMs: 5000,
})

“value”의 값이 바뀌어도 다른 렌더링이 발생하는 동안에는 최대 5000ms가 지연됩니다. 시간이 다 되거나 렌더링이 완료되면 “deferredValue”가 변경되면서 상태값이 변하게 됩니다.

 

 

챌린지 사전과제로 라이프사이클을 한번 더 복습하고, 리액트 18버전에 대해 알아볼 수 있는 좋은 계기가 된 것 같다.

useTransition로 사용자에게 로딩화면을 쉽게 보여줄 수 있을 것 같고, useDeferredValue 훅으로 디바운싱이나 쓰로틀링같은 테크닉을 적용하지 않더라도 긴급업데이트를 긴급하지 않은 업데이트로 쉽게 바꿔줄 수 있기 때문에 자주 쓰일것 같다는 생각이 든다.

 

위에 적은 내용들 말고 새로운 기능들이 한두가지 더 있는데 자세한 내용은 공식블로그를 참고하자.

 

 

 

참고

---

React v18.0 – React

[React.js] React 18의 새로운 기능

React 18 버전의 실상을 파헤치다. - 오픈소스컨설팅 테크블로그