[React와 Typescript] 종속성, JSX, MUI 문제들 해결

React 프로젝트에서 겪을 수 있는 주요 문제와 해결 방법

React와 TypeScript, 그리고 MUI(Material-UI)와 관련된 문제들을 해결하며 많은 것을 배웠습니다.

 

문제 1: 종속성 충돌(Dependency Conflicts)

상황

React 프로젝트를 세팅하거나 새로운 라이브러리를 설치할 때 npm install 또는 yarn install 명령어 실행 시, ERESOLVE 에러가 발생했습니다.

에러 메시지 예시:

npm ERR ERESOLVE could not resolve
npm ERR Conflicting peer dependency: typescript@4.9.5

 

이 문제는 프로젝트에 설치된 react-scripts, typescript, 또는 기타 라이브러리 간의 버전 호환성 문제에서 발생합니다. 특히, react-scripts가 특정 버전의 TypeScript만 지원할 때 종종 발생합니다.

---

해결 방법

--legacy-peer-deps 플래그 사용

npm install --legacy-peer-deps

이 명령어는 종속성 충돌을 무시하고 라이브러리를 강제로 설치합니다. 단, 사용 후 프로젝트가 정상적으로 작동하는지 꼭 확인하세요.

 

yarn 사용 npm 대신 yarn을 사용하면 종속성 문제를 더 잘 관리할 수 있습니다.

 

corepack enable
yarn install

 

TypeScript 버전 호환성 맞추기 react-scripts와 호환되는 TypeScript 버전을 확인한 후 설치하세요. 예를 들어:

npm install typescript@4.9.5 --save-dev

 

문제 2: JSX 설정 누락

상황

TypeScript 프로젝트에서 JSX 코드를 사용할 때, 아래와 같은 오류가 발생했습니다.

에러 메시지 예시:

 

TS17004: Cannot use JSX unless the '--jsx' flag is provided.

---

해결 방법

tsconfig.json 수정 tsconfig.json 파일에서 아래 설정을 추가하거나 수정하세요.

 

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17 이상은 react-jsx를 권장
    "moduleResolution": "node"
  }
}

 

프로젝트 재빌드 설정을 수정한 후 프로젝트를 다시 시작합니다:

npm start

---

문제 3: MUI와 React 버전 불일치

상황

MUI(Material-UI)를 설치한 후 컴포넌트를 사용할 때, 아래와 같은 오류가 발생했습니다.

에러 메시지 예시:

 

Module not found: Can't resolve '@mui/material'

---

해결 방법

올바른 MUI 패키지 설치 React 18+를 사용하는 경우, 최신 MUI 패키지를 설치해야 합니다.

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

React와 MUI 버전 호환성 확인 react와 @mui 패키지의 호환성을 항상 확인하세요.

---

문제 4: React 컴포넌트에서 빨간 줄 표시

상황

React 컴포넌트에서 TypeScript를 사용할 때, JSX 코드 또는 컴포넌트 선언에서 빨간 줄이 뜨는 문제가 발생했습니다. 이는 주로 @types/react가 누락되었거나 TypeScript 설정이 제대로 되어 있지 않을 때 발생합니다.

---

해결 방법

타입 선언 패키지 설치 아래 패키지를 설치합니다.

npm install --save-dev @types/react @types/react-dom

React 컴포넌트 타입 정의 TypeScript에서 React 컴포넌트를 작성할 때는 아래와 같이 React.FC 타입을 명시합니다.

import React from 'react';

const MyComponent: React.FC = () => {
  return <div>Hello, World!</div>;
};

export default MyComponent;

재빌드 모든 설정을 완료한 후 프로젝트를 다시 빌드하세요:

npm start

 

결론

오늘 함께 해결한 문제들은 React와 TypeScript를 사용하는 프로젝트에서 흔히 겪는 문제들이었습니다. 주요 해결 방법은 다음과 같습니다:

• 종속성 문제: --legacy-peer-deps 또는 호환 버전 확인
• JSX 문제: tsconfig.json 설정 추가
• MUI 문제: 최신 버전 설치 및 React와의 호환성 확인
• 컴포넌트 확장: 데이터를 표시하는 JSX 구조 확장