[React] props, defaultProps, propTypes의 정의, 꼭 사용해야 하나?

props가 무엇인지 이제는 알고쓰자!

props의 정의

props는 컴포넌트 속성을 설정할 때 사용하는 요소

컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.

props를 바꾸기 위해서는 부모 컴포넌트에서 바꾸어 주어야 한다.

props 기본값 설정 : defaultProps

name 값을 지정하지 않아도 기본값을 설정하여 보여줄 수 있다.

const MyComponent = props => {
	return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
}

MyComponent.defaultProps = {
   name: 'dan'
};

export default MyComponent;

위 코드와 값이 defaultProps를 설정하면 값을 지정하지 않아도 props.name에 'dan'이 default 값으로 설정된다.

따라서 출력 결과는 아래와 같이 나오게 된다.

안녕하세요, 제 이름은 dan입니다.

태그 사이의 내용을 보여주는 children

컴포넌트 태그 사이의 내용을 보여주는 props인 children 

// MyComponent.js
const MyComponent = (props) => {
  return <div>children 값은 {props.children}입니다.</div>;
};

// App.js
import MyComponent from "./MyComponent";

const App = () => {
  return <MyComponent>리액트</MyComponent>;
};

MyComponent 태그 사이에 값을 적을 경우 이는 props의 children이 된다. 

따라서 출력 결과는 아래와 같다.

children값은 리액트입니다.

비구조화 할당 문법을 통해 props 내부 값 출력하기

비구조화 할당 문법을 사용하면 props값을 조회할 때마다 props.이라는 키워드 없이 편하게 작업할 수 있다.

const MyComponent = (props) => {
  const { name, children } = props; // 비구조화 할당
  return (
    <div>
      Name은 {name}, children은 {children}
    </div>
  );
};

함수의 파라미터 부분에서도 사용할 수 있다. 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용한다.

const MyComponent = ({ name, children }) => {
  return <div> Name은 {name}, children은 {children} </div>
};

이렇게 함수 컴포넌트에서 props를 사용할 때는 파라미터 부분에서 비구조화 할당 문법을 사용한다.

propsTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propsTypes를 사용한다.

propsTypes를 지정하는 방법은 defaultProps를 설정하는 것과 비슷하다.

사용하기 위해서는 import문을 통해 불러와야 한다.

import PropTypes from "prop-types";

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

name의 값을 문자열 형태로 전달해야 한다는 것을 의미한다.

만약 문자열이 아니 값을 전달할 경우 콘솔에 Invalid한 값이라는 경고가 뜬다. 

하지만 값이 출력되기는 한다는 점...

isRequired를 사용하여 필수 propTypes 설정

propsTypes를 지정하지 않았을 때 경고 메시지를 띄워주는 것도 가능하다. 

import PropTypes from "prop-types";

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

값을 지정하지 않고 실행시켜보면 콘솔창에서 값이 필요하다는 경고를 확인할 수 있다.

defaultProps와 propsTypes는 꼭 사용해야 하나?

이는 컴포넌트의 필수 사항이 아니기 때문에 꼭 사용할 필요가 없지만 큰 규모의 프로젝트를 진행할 때(다른 개발자와 협업할 때) 해당 컴포넌트에 어떤 props가 필요한지 쉽게 알 수 있기 때문에 능률이 좋아질 것이다.