Uncaught TypeError: Class extends value #<Object> is not a constructor or null 오류

Uncaught TypeError: Class extends value #<Object> is not a constructor or null 오류

문제 상황

함수형 컴포넌트를 클래스형 컴포넌트로 바꾸는 과정에서 다음과 같은 오류가 발생했다.

⚠️Uncaught TypeError: Class extends value #<Object> is not a constructor or null

잘못된 코드

import Component from "react";

class User extends Component {
  render() {
    return <li>{this.props.name}</li>;
  }
}

// const User = (props) => {
//   return <li className={classes.user}>{props.name}</li>;
// };

export default User

문법 상의 문제는 없어서 뭐가 문제일까 고민하고 다른 컴포넌트도 수정하다가 다시와서 보니까 Component import 문제였다.

개선한 코드

import {Component} from "react";

react 모듈에는 복수의 함수가 있는 라이브러리 형태의 모듈로서 default 키워드를 사용하지 않고 있다.

따라서 중괄호를 붙여 import한다.