2024년 6월 19일

React 18, 더 강력해진 기능으로 돌아왔다. Concurrent Mode, Server Components 완벽 정복 (코드 예제 포함)

React는 웹 개발의 판도를 바꾼 프론트엔드 라이브러리로, 컴포넌트 기반 개발 방식과 Virtual DOM을 통해 효율적인 UI 개발을 가능하게 해왔다. 2022년 3월, React는 3년 만에 메이저 업데이트인 React 18을 발표하며 다시 한번 개발자들의 이목을 집중시켰다. Concurrent Mode, Server Components 등 강력한 기능을 선보이며 웹 애플리케이션 개발에 새로운 가능성을 제시했지만, 동시에 새로운 개념과 API에 대한 학습 부담을 안겨주기도 했다.

React 18, 뭐가 달라졌을까?

React 18의 가장 큰 변화는 Concurrent Mode의 도입이다. Concurrent Mode는 React가 여러 작업을 동시에 처리할 수 있도록 하는 기능으로, 사용자 인터랙션에 더욱 빠르게 반응하고 부드러운 UI를 제공하는 데 기여한다. 또한 Server Components는 컴포넌트를 서버에서 렌더링하고 클라이언트에 전달하는 방식으로, 초기 로딩 속도를 향상시키고 번들 크기를 줄이는 데 효과적이다.

하지만 이러한 새로운 기능들은 기존 React 개발 방식과는 다른 접근 방식을 요구하기 때문에, 개발자들은 새로운 개념과 API를 학습해야 하는 어려움에 직면한다. 특히 Concurrent Mode는 Suspense, useTransition, startTransition, useDeferredValue 등 다양한 API를 제공하는데, 이러한 API를 효과적으로 사용하기 위해서는 Concurrent Mode의 동작 방식과 각 API의 역할을 정확히 이해해야 한다.

React 17에서 18로 업그레이드, 어떻게 할까?

  1. React 18 설치: 먼저 프로젝트의 React 버전을 18로 업데이트해야 한다. npm 또는 yarn을 사용하여 React와 React DOM을 최신 버전으로 업데이트한다.
npm install react react-dom

2. 루트 컴포넌트 변경: 기존 ReactDOM.render를 ReactDOM.createRoot로 변경하여 Concurrent Mode를 활성화한다.

// Before (React 17)
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// After (React 18)
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

3. StrictMode 활용: StrictMode를 사용하여 Concurrent Mode에서 발생할 수 있는 문제점을 사전에 감지하고 수정한다.

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  1. 새로운 API 학습 및 적용: Concurrent Mode를 최대한 활용하기 위해 Suspense, useTransition, startTransition, useDeferredValue 등 새로운 API를 학습하고 적용한다.

상태 관리, 새로운 선택지가 등장하다!

React 18과 함께 Zustand, Jotai 등 새로운 상태 관리 라이브러리가 등장했다. 이들은 기존 Redux의 복잡성을 해결하고, Context API의 단순함을 유지하면서도 강력한 기능을 제공한다. Zustand는 간결한 API와 훅 기반의 사용법을 통해 직관적인 상태 관리를 가능하게 하며, Jotai는 atom이라는 작은 단위의 상태를 조합하여 복잡한 상태를 관리하는 방식을 제공한다.

예를 들어, Zustand를 사용하여 간단한 카운터 상태를 관리하는 코드는 다음과 같다.

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

하지만 새로운 상태 관리 라이브러리를 도입하는 것은 기존 코드를 수정해야 하는 작업을 수반하며, 새로운 라이브러리에 대한 학습 시간이 필요하다는 단점이 있다. 따라서 프로젝트의 규모와 복잡도, 개발팀의 역량 등을 고려하여 신중하게 결정해야 한다.

Stack Overflow에서 논의되는 문제점과 해결 방안

Stack Overflow에는 React 18의 새로운 기능 적용 방법, Concurrent Mode 관련 오류 해결, Zustand, Jotai 등 새로운 상태 관리 라이브러리 활용 방법에 대한 질문들이 꾸준히 올라오고 있다. 예를 들어, Concurrent Mode를 적용했을 때 발생하는 예상치 못한 렌더링 문제, Suspense를 사용하여 데이터 로딩 상태를 효과적으로 처리하는 방법, Zustand와 Jotai를 사용하여 복잡한 상태를 관리하는 방법 등에 대한 질문들이 많이 논의되고 있다.

이러한 문제들을 해결하기 위해서는 React 18 공식 문서 및 관련 자료를 꼼꼼히 학습하고, 예제 코드를 통해 직접 적용해보는 것이 중요하다. 또한 Stack Overflow 및 개발자 커뮤니티를 적극 활용하여 다른 개발자들의 경험과 지식을 공유하고, 질문을 통해 도움을 받는 것도 좋은 방법이다.

React 17, 아직 유효한 선택지

React 18의 새로운 기능이 꼭 필요하지 않거나, 학습 및 적용에 어려움을 느끼는 경우에는 React 17을 유지하면서 기존 상태 관리 라이브러리 (예: Redux, Context API)를 활용하는 것도 좋은 선택이다. React 17은 여전히 안정적이고 강력한 프론트엔드 라이브러리이며, 많은 프로젝트에서 성공적으로 사용되고 있다.

결론

React 18은 웹 개발의 새로운 지평을 열어줄 혁신적인 기능들을 제공하지만, 새로운 기술을 도입하는 과정에서 어려움을 겪는 것은 당연하다. React 18 공식 문서 및 관련 자료를 꾸준히 학습하고, Stack Overflow와 같은 개발자 커뮤니티를 적극 활용하여 문제를 해결해 나가는 것이 중요하다. 또한 React 18의 새로운 기능이 꼭 필요하지 않은 경우에는 React 17을 유지하면서 기존 개발 방식을 고수하는 것도 현명한 선택이다.

참고 자료: