[리액트를 다루는 기술] - TIL 127 컴포넌트 특징

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

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는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다. 참고로 리액트 개발팀에서는 함수형 컴포넌트로 개발할 것을 권장한다는 점도 기억하면 좋을 것 같다.

 

오늘을 마무리 하며

 

  인프런에서 리액트강의를 듣고, 데브코스를 통해 리액트 강의를 듣고, 리액트를 다루는 기술 책을 읽으면서 리액트에 대한 이해도가 점점 높아지고 있다는것을 실감하고 있다. 이제는 자연스럽게 리액트 컴포넌트를 작성하는것이 꽤나 익숙해진 상태이다. 그래서 오늘은 컴포넌트와 관련되어 조금은 어색하거나 새롭게 알게 된 내용을 위주로 정리하였다. 다만, 지금까지의 코드를 작성해 온 것을 바탕으로 위의 내용들 중 props의 타입을 미리 지정하여 경고 메시지를 받거나 props를 필수적으로 받지 않으면 경고 메시지를 전달하는 것은 타입스크립트를 사용하면 자연스레 필요 없는 기능이라는 생각이 들었다. 아직 타입스크립트에 대해서 공부하지는 못했지만 오고 가며 짧게 나마 읽은 글을 봤을 때 타입 지정을 통해서 props로 받을 수 있는 데이터 타입을 정의하고 또 props로 전달 받아야하는 데이터를 부모 컴포넌트로부터 전달해주지 않으면 에러가 발생하는것으로 알고 있기 때문에 propTypes와 isRequired는 작성하는 일이 거의 없지 않을까 싶다.