[React] props 개념, 사용법, defaultProps, propTypes

props와 state는 React에 있어서 몰라서는 안 될 기초 개념입니다. 개념을 잘 익혀둬야 합니다.

props

parent 컴포넌드(부모)에게서 받아온 property를 말합니다.

보통 변하지 않는 데이터를 전달하는 용도로 사용됩니다. 

 

props를 사용하면 컴포넌트끼리 값을 주고받을 수 있습니다.

예를 들어 A컴포넌트에서 값을 지정해주면 B컴포넌트에서 A컴포넌트가 지정한 값을 사용할 수 있는 것이죠. 

 

props는 jsx문법으로 작성하면 됩니다. 

 

JSX 이해하기 – React

 

props 예시

Parent.js

class Parent extends React.Component {
    render(){
        return  (
            <div>
                <Child name={"이름입니다"}/>
            </div>
        );
    }
}

Child.js

class Child extends React.Component {
    render(){
        return  (
            <div>
                {this.props.name}
            </div>
        );
    }
}

결과화면

 

propTypes

props의 타입을 지정해줌으로서 코드를 명확하게 할 수 있고 타입 정보를 쉽게 파악할 수 있습니다. 

그리고 props의 타입을 구할 때 사용되기도 합니다.

 

propTypes는 필수는 아닙니다. 하지만 사용하는 습관을 들여 놓으면 깔끔한 코드를 작성할 수 있습니다. 

 

Child.js

class Child extends React.Component {
  render(){
      return  (
          <div>
              {this.props.name}
          </div>
      );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
  // name: PropTypes.string.isRequired
};

props인 name의 타입을 string으로 지정했습니다.

뒤에 .isRequired를 붙인 경우에 값이 없거나 다른 타입의 값이 들어오면 오류가 발생합니다.

 

defaultProps

props값을 지정하지 않았을 때 default값을 적용하는 방법도 있습니다. 바로 defaultProps입니다.

 

Parent.js

class Parent extends React.Component {
    render(){
        return  (
            <div>
                <Child/> // props를 지정하지 않음
            </div>
        );
    }
}

Child.js

class Child extends React.Component {
    render(){
        return  (
            <div>
                {this.props.name}
            </div>
        );
    }
}

// defaultProps를 지정해줌
Child.defaultProps = { 
  name: 'default 이름입니다', 
};

결과화면

 

React 공식문서

자습서: React 시작하기 – React