@uiw/react-codemirror는 최신 React 버전과 완벽하게 호환되며, 함수형 컴포넌트와 훅을 활용한 현대적인 개발 방식에 최적화되어 있습니다.

react-codemirror2는 클래스형 컴포넌트와 함수형 컴포넌트 모두에서 사용할 수 있지만, CodeMirror 5에 기반하고 있어 최신 React 기능을 완전히 활용하지는 못합니다.

@uiw/react-codemirror는 모듈화된 구조로 필요에 따라 특정 기능만 가져와 사용할 수 있어, 불필요한 코드 로드를 줄이고 경량화된 편집기를 구현할 수 있습니다.

react-codemirror2는 전체 CodeMirror 5 라이브러리를 포함하므로, 모든 기능이 필요하지 않은 경우에는 상대적으로 더 많은 코드가 로드됩니다.

@uiw/react-codemirror는 CSS 변수와 스타일링 API를 제공하여, 테마 및 스타일을 쉽게 커스터마이징할 수 있습니다. 또한, 필요에 따라 플러그인을 추가하여 기능을 확장할 수 있습니다.

react-codemirror2는 CodeMirror 5의 모든 플러그인과 테마를 지원하므로, 기존의 다양한 커스터마이징 옵션을 활용할 수 있습니다. 그러나, 커스터마이징을 위해서는 추가적인 설정이 필요할 수 있습니다.

@uiw/react-codemirror는 잘 정리된 문서와 예제가 제공되어 있어, 사용자가 쉽게 이해하고 활용할 수 있습니다. 또한, GitHub에서 활발한 개발과 커뮤니티 지원이 이루어지고 있습니다.

react-codemirror2는 오랜 역사를 가진 프로젝트로, 풍부한 문서와 커뮤니티 지원이 있습니다. 특히, CodeMirror 5에 대한 광범위한 자료와 예제가 존재하여, 학습과 활용에 도움이 됩니다.

@uiw/react-codemirror 예제

import React from 'react';
import { CodeMirror } from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';

const App = () => {
  return (
    <CodeMirror
      height="200px"
      theme="dark"
      extensions={[javascript()]}
      onChange={(value) => {
        console.log('코드 변경됨:', value);
      }}
    />
  );
};

export default App;

react-codemirror2 예제

import React, { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/javascript/javascript';

const App = () => {
  const [code, setCode] = useState('// 여기에 코드를 입력하세요');

  return (
    <CodeMirror
      value={code}
      options={{
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
      }}
      onBeforeChange={(editor, data, value) => {
        setCode(value);
      }}
      onChange={(editor, data, value) => {
        console.log('코드 변경됨:', value);
      }}
    />
  );
};

export default App;