2. 컴포넌트 이해 & propTypes 활용

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트로 구성되어 있다.

 

create-react-app 으로 설정된 기본 구조

 

MyComponent.js [임의로 만든 파일]

import React, { Component } from 'react'

class MyComponent extends Component {
    render() {
        return (
            <div>
                컴포넌트 초기 코드 작성
            </div>
        )
    }
}
export default MyComponent;

 

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <MyComponent />
  );
}

export default App;

 

이제 해당폴더에가서 yarn start 를 시작하면 된다.

 

결과)

 

---

MyComponent.js

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

class MyComponent extends Component {
    static defaultProps = {
        name: '기본 이름',
        age: PropTypes.number.isRequired // 필수적으로 존재해야 하며 숫자입니다
      }
    
      static propTypes = {
        name: PropTypes.string // name props의 타입을 문자열로 설정합니다.
      }
    
      state = {
        number: 0
      }
    
      render() {
        return (
          <div>
            <p>안녕하세요, 제 이름은 {this.props.name} 입니다.</p>
            <p>저는 {this.props.age}살 입니다.</p>
            <p>숫자: {this.state.number}</p>
            <button onClick={() => {
                this.setState({
                  number: this.state.number + 1
                })
              }
            }>더하기</button>
          </div>
        )
      }
}
export default MyComponent;

App.js

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <MyComponent name="React" age={4}/>
  );
}

export default App;

결과 :

 

---

- 더 많은 propTypes 종류

array : 배열

bool : 참, 거짓

func : 함수

number : 숫자

object : 객체

string : 문자열

symbol : ES 문법의 심벌 객체

node : 렌더링할 수 있는 모든 것(숫자, 문자열, element 또는 이들로 구성된 배열)

element : 리액트 요소

instanceOf(MyClass) : 특정 클래스의 인스턴스

oneOf(['Male', 'Female']) : 주어진 배열 요소 중 값 하나

oneOfType([React.PropTypes.string, React.PropTypes.number]) : 주어진 배열 안의 종류 중 하나

arrayOf(React.PropTypes.number) : 주어진 종류의 값을 가진 객체

shape({name : React.PropTypes.string, age : React.PropTypes.number}) : 주어진 스키마를 가진 객체

any : 아무 종류