컴포넌트 특징들

함수형 컴포넌트와 클래스형 컴포넌트의 차이점

1. 클래스형 컴포넌트의 경우 state 기능, 라이프 사이클 기능의 사용 및 임의 메서드 정의가 가능하다.

2. 함수 컴포넌트의 경우 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다.(유의미한 차이는 아니라고 함)

3. 함수 컴포넌트를 사용하는 것이 배포할 때 결과물의 파일 크기가 더 작다.(유의미한 차이는 아니라고 함)

4. 함수 컴포넌트의 경우에는 클래스형 컴포넌트에서의 라이프 사이클 기능 대신 Hooks를 통해 해결 가능하다.

 

props 기본값 설정: defaultProps

  부모 컴포넌트로 부터 prop을 전달 받지 않은 경우에 defaultProps를 설정할 수 있다. 

const MyComponent = (props) => {
  return <div>안녕하세요, {props.name}입니다.</div>;
}

MyComponent.defaultProps = {
  name: '우대현'
}

 

propTypes를 통한 props 검증

  컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다. propTypes를 사용하려면 우선 코드 상단에 import 구문을 사용하여 불러와야 한다.

import PropTypes from 'prop-types';

const MyComponent = ({name}) => {
  return (...);
};

MyComponent.propTypes = {
  name: PropTypes.string
};

export default MyComponent;

만약 props가 propTypes에서 지정한 형태와 일치하지 않는다면 console창에서 경고 메시지가 출력된다.

 

isRequired를 사용하여 필수 propTypes 설정

import PropTypes from 'prop-types';

const MyComponent = ({name}) => {
  return (...);
};

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

export default MyComponent;

만약 부모 컴포넌트에서 props를 넘겨주지 않으면 console창에서 경고 메시지가 출력된다. 

 

그 외 특징

  props와 state는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있어 비슷해 보일 수 있지만, 그 역할이 매우 다르다는 점을 기억하자. props는 부모 컴포넌트가 설정하고 state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다. 참고로 리액트 개발팀에서는 함수형 컴포넌트로 개발할 것을 권장한다는 점도 기억하면 좋을 것 같다.