React_ 함수형 컴포넌트와 클래스형 컴포넌트

내용 출처 : 책 <리액트를 다루는 기술>

함수형 컴포넌트

// App.js

import MyComponent from './MyComponent';
const App = () => {
  return (
    <MyComponent name="love" favoriteNumber={2}>
      React{' '}
    </MyComponent>
  );
};

export default App;

// MyComponent.js
import PropTypes from 'prop-types';

const MyComponent = ({ principle, children, name, favoriteNumber }) => {
  return (
    <div>
      {' '}
      My first principle is to {principle}.{' '}
      <h1>
        {children}. My name is {name}
      </h1>
    </div>
  );
};

MyComponent.defaultProps = {
  principle: 'Alehandro',
};

MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};

export default MyComponent;

Props를 객체분해 할당으로 분해하여 사용한다. Children은 MyComponent 태그를 열고 닫는 그 사이에 끼워둔 문자열을 가져오는 것이다. Children은 왜 쓰는지는 잘 모르겠다. 중간이 끼인 것을 가져오는 것이 무슨 의미가 있는 걸까.

Component는 함수형과 클래스형이 있는데, 성능이 조금 더 좋다고 한다. 메모리 자원도 덜 사용하고, 파일 양도 적다. 하지만 드라마틱한 차이는 나는 것은 아니라 한다. 함수형 컴포넌트는 state, 라이프사이클 API을 사용할 수 없었다는 단점이 있었는데, 16.8 버전 업데이트로 Hook을 사용할 수 있게 되면서 이 문제가 해결되었다고 한다.

클래스형 컴포넌트

// MyComponent.js
import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  render() {
    const { principle, children, name, favoriteNumber } = this.props;
    return (
      <div>
        {' '}
        My first principle is to {principle}.{' '}
        <h1>
          {children}. My name is {name}
        </h1>
      </div>
    );
  }
}

MyComponent.defaultProps = { principle: 'Alehandro' };

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

export default MyComponent;

이 코드는 클래스형 컴포넌트다.

defaultProps는 만약 props의 프로퍼티가 들어오지 않을 경우, 기본값을 설정해줄 수 있게 해준다. PropTypes은 타입을 정해주는 것이고, 여기에 isRequired를 붙이면 필수값으로 넣어야 한다. 만약 넣지 않으면 콘솔창에 에러를 띄어준다.

MyComponent.defaultProps 클래스 외부에서 설정해주지 않고 클래스 내에서 깔끔하게 설정해줄 수도 있다.

import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  static defaultProps = { principle: 'Alehandro' };

  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired,
  };

  render() {
    const { principle, children, name, favoriteNumber } = this.props;
    return (
      <div>
        {' '}
        My first principle is to {principle}.{' '}
        <h1>
          {children}. My name is {name}
        </h1>
      </div>
    );
  }
}

export default MyComponent;