[React] 프로퍼티에 필수, 기본값 지정 / 자식 프로퍼티 사용

필수 프로퍼티

---

특정 컴포넌트에 반드시 전달되어야 하는 프로퍼티가 있다면, 프로퍼티를 필수 프로퍼티로 지정하여 보낼 수 있다.
필수 프로퍼티는 특수 변수 isRequired를 사용하여 전달할 수 있다.

---

필수 프로퍼티 사용하기

---

먼저 App.js에서 object형 프로퍼티와 정수형 프로퍼티 2개를 넘겨 줄 것이다.

App.js

import Ex from './03/Ex';
import './App.css';

function App() {
  return (
    <div className="App">
      <Ex
        objValue = {{ year: 2023 }}
        requiredNumValue = {2023}
      />
    </div>
  );
}

export default App;

여기서 우리는 requiredNumValue를 기본값으로 지정할 것이다.
props는 기본적으로 문자형으로 전달된다.
때문에 prop-types를 사용하여 프로퍼티 자료형을 지정해줘야 한다는 것을 잊어선 안된다.

import PropTypes from 'prop-types';

이번 글에서도 이녀석을 사용할 것이다.

---

isRequired를 사용하여 필수 프로퍼티 지정

Ex.propTypes = {
    objValue: PropTypes.shape({
        year: PropTypes.string,
        yearnum: PropTypes.number,
    }),
    requiredNumValue: PropTypes.number.isRequired,
}

여기서는 requiredNumValue에 집중하면 된다.
requiredNumValue는 isRequired를 사용하여 필수 프로퍼티로 지정해 주었다.
또한 정수형 props이기 때문에 자료형을 number로 지정해 주었다.
만약 지정한 자료형이 아닌 다른 형태의 자료형 데이터가 들어오게 되면 당연히 오류가 나오기 때문에 조심해야 한다.

---

프로퍼티에 기본값 지정하기

---

프로퍼티에 기본값 또한 지정할 수 있다.
대표적으로 기본값이 필요한 자료형은 boolean형이 있다.
때문에 boolean형의 프로퍼티를 기본값으로 주는 예제를 통해 알아 볼 것이다.

먼저 App.js에서는 프로퍼티를 안 넘기고 렌더링만 할 것이다.

App.js

import Ex from './03/Ex';
import './App.css';

function App() {
  return (
    <div className="App">
      <Ex />
    </div>
  );
}

export default App;

이제 Ex 컴포넌트의 코드를 보겠다.

Ex.jsx

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

class Ex extends Component {
    render() {
        let message = '';
        if (this.props.boolValue === false) {
            message = 'boolValue 기본값은 false 입니다.'
        }else if (this.props.boolValue === true) {
            message = 'boolValue 기본값은 true 입니다.'
        }
        console.log(this.props.boolValueWithoutDefault);
        return (
            <div>
                <p>{message}</p>
            </div>
        );
    }
}

Ex.propTypes = {
    boolValue: PropTypes.bool,
    boolValueWithoutDefault: PropTypes.bool,
};

Ex.defaultProps = {
    boolValue: false,
}
export default Ex;

boolValue와 boolvalueWithoutDefault라는 2개의 프로퍼티를 생성했다.

---

defaultProps를 사용하여 기본값 지정

Ex.defaultProps = {
    boolValue: false,
}

defaultProps라는 특수 변수를 사용하여 boolValue의 기본값을 false로 지정하였다.
boolValue의 값이 false이기 때문에 message 변수에는 'boolValue의 기본값은 false 입니다.' 라는 문자열이 들어가게 될 것이고 렌더링 될 것이다.
그렇다면 기본값을 지정해 주지도 않았고, 부모 컴포넌트에서 값을 넘겨주지도 않은 불쌍한 boolValueWithoutDefault는 어떻게 되는 것인가?
결과를 통해 알아볼 수 있다.

실행 결과

결과는 다음과 같다.
console에 undefined가 출력되는 것을 확인할 수 있다.
이렇게 Ex컴포넌트에서 기본값이 지정되지 않고, 부모 컴포넌트에서도 값을 지정받지 않는다면 boolValueWithoutDefault에는 undefined가 전달되게 된다.

---

자식 프로퍼티

---

JSX에서도 html의 mark up 표현식을 사용할 수 있다.

App.js

import Ex from './03/Ex';
import './App.css';

function App() {
  return (
    <div className="App">
      <Ex>
        <div><span>자식 프로퍼티</span></div>
      </Ex>
    </div>
  );
}

export default App;

이런 식으로 컴포넌트 하위에 자식 노드를 배치할 수 있다.
하지만 이대로 실행을 한다면 자식 프로퍼티는 출력되지 않는다.
컴퓨터는 꽤나 멍청하기 때문에 Ex 컴포넌트에서 하위에 자식 컴포넌트가 있다는 것을 이해시켜 주어야 한다.
위의 Ex.jsx 코드에서 살짝의 수정을 할 것이다.

Ex.propTypes = {
    boolValue: PropTypes.bool,
    boolValueWithoutDefault: PropTypes.bool,
    //자식 프로퍼티 가져오기
    children: PropTypes.node,
};

자식 프로퍼티는 따로 이름을 지정하지 않으면 children으로 전달이 된다.
children의 타입을 node로 지정해 준다.

return (
            <div>
                {/* 자식 프로퍼티 출력 */}
                <p>{this.props.children}</p>
                <p>{message}</p>
            </div>
        );

후에 {this.props.children}을 출력해 주면 <div><span>자식 프로퍼티</span></div>가 출력되게 된다.

하지만 굳이 이렇게 쓸 이유가 없다.

<Ex 
   children={<div><span>자식 프로퍼티</span></div>}
/>

이렇게 별도의 프로퍼티로 넘겨주는 것이 편하기 때문이다.
때문에 위의 방법은 잘 쓰이지 않는다.

---

이렇게 프로퍼티에 필수, 기본값을 지정하는 방법과 자식 프로퍼티까지 알아 보았다.