174. 퍼스트 클래스 기반 컴포넌트 추가하기

 

render() 메소드는 리액트에 필요한 특정 메소드로 리액트가 jsx 코드 안에 컴포넌트가 사용된 것을 확인하면 그때 호출하는 메소드이다

따라서, render() 메소드는 함수형 컴포넌트에서의 반환 문장과 동일하다

 

여기서 한 가지 다른 점은 props의 유무이다. 클래스형 컴포넌트를 사용할 때는 props를 함수형 처럼 받을 수 없기 때문에 우리는 먼저 Component 를 'react'에서 import 하는 것이 필요하다 

그리고 User class에 extends Component 를 작성해준다

이것은 자바스크립트의 내장 기능이라고 볼 수 있다

extends로 확장했기 때문에 이제 props 대신 this.props 를 넣어서 name에 접근할 수 있다

이 this는 컴포넌트로 받은 모든 props를 포함한다

클래스 기반 컴포넌트는 함수형 컴포넌트와 함께 작업이 가능하다. Users는 함수형 컴포넌트지만, 이 것이 렌더링하는 User는 클래스 기반 컴포넌트이다. 전혀 문제가 되지 않는다.

 

클래스형 컴포넌트와 classUser 함수형 컴포넌트 User 비교 

import classes from './User.module.css';
import { Component } from 'react';

class classUser extends Component {
  render() {
    return <li className={classes.user}>{this.name}</li>;
  }
}
const User = (props) => {
  return <li className={classes.user}>{props.name}</li>;
};

export default User;