React 리액트 props 사용법

props란

• props 는 properties의 줄임말
• 컴포넌트의 속성
• 부모 컴포넌트에서 (자식) 컴포넌트의 속성값을 조정함
• (자식) 컴포넌트에 props 들어갈 부분 코딩
• 화살표 함수형에서 () 대신 props 써줌

 

풀어쓰기

const ChildCompo = ({who, order}) => {
  
}

변수형

const ChildCompo = props => {
  return <div>{props.who}님은 {props.order} 주세요</div>
};

변수형 + 비구조화 할당 문법

const ChildCompo = props => {
  const {who, order} = props;
  return <div>{who}님은 {order} 주세요</div>;
};

defaultProps

부모에서 속성 안 넣어줄 경우를 대비, .defaultProps로 default 값을 줄 수 있음. 위 코드에서 추가하자면..

const NewComp = props => {
  const {who, order} = props;
  return <div>{who}님은 {order} 주세요</div>;
};

ChildCompo.defaultProps = {
  who: ‘아저씨’,
  order: ‘카푸치노’
};

export default ChildCompo;

 

부모에서 속성값

부모 컴포넌트, 속성값 넣어 자식 호출

import ChildCompo from ‘./ChildCompo’;

const App =()=> {
  return <ChildCompo who=‘나’ order=“카페라떼” />
}

export default App;

자식 컴포넌트, props 검증문 추가(PropTypes)

 

• 필수 props 지정시
• props의 데이터 타입 지정시
• ‘prop-types’에서 PropTypes 불러오기

 

import PropTypes from ‘prop-types’;

const ChildCompo = props => {
  const {who, order} = props;
  return <div>{who}님은 {order} 주세요</div>;
};

ChildCompo.defaultProps = {
  who: ‘아저씨’,
  order: ‘카푸치노’
};

ChildCompo.propTypes = {
  who: PropTypes.string,
  order: PropTypes.string.isRequired
};

export default ChildCompo;

---

PropTypes 종류

레퍼: github.com/facebook/prop-types

 

• array 배열
• arrayOf(특정 PropType): 특정 PropType으로 이루어진 배열 (ex. arrayOf(PropTypes.number)는 숫자로 이루어진 배열)
• bool: true, false
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더 가능한 모든 것(숫자,문자,jsx, children..)
• instanceOf(클래스): 특정 클래스의 인스턴스
• oneOf([‘남자’,’여자’]): 여기 적힌 배열 값중 하나
• oneOfType([React.PropTypes.string, React.PropTypes.number]): 여기 적힌 타입 중 하나
• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체(?)
• shape({ who: PropTypes.string, order: PropTypes}): 주어진 스키마를 가진 객체
• any: 아무 종류

---

 

---

클래스형 컴포넌트에서 props 사용하기

• render 함수에서 this.props로 조회
• 비구조화 할당 문법 사용시 다음과 같음

 

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

class ChildComp extends Component{
  render(){
    const {who, order} = this.props;
    return <>{who}님, 주문하신 {order} 나왔습니다.</>;
  }
}

ChildComp.defaultProps = {
  who: ‘아저씨’,
  order: ‘카푸치노’
};

ChildComp.propTypes = {
  who: PropTypes.string,
  order: PropTypes.string.isRequired
};

export default ChildComp;

defaultProps와 propTypes는 컴포넌트 클래스 내부에 써줄 수 있음

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

class ChildComp extends Component{
  static defaultProps = {
    who: ‘아저씨’,
    order: ‘카푸치노’
  };

 static propTypes = {
    who: PropTypes.string,
    order: PropTypes.string.isRequired
  };

  render(){
    const {who, order} = this.props;
    return <>{who}님, 주문하신 {order} 나왔습니다.</>;
  }
}

export default ChildComp;

부모 컴포넌트, 태그 사이 내용

부모 컴포넌트에서 자식 컴포넌트 호출시, 그 태그 사이에 값을 넣고, 그것을 자식 컴포넌트에서 이용하고 싶을 때에는 props에 children을 추가해 쓰면 된다

부모

import ChildCompo from ‘./ChildCompo’;

const App =()=> {
  return <ChildCompo who=‘나’ order=“카페라떼”>한 잔</ChildComp>
}

export default App;

자식

import PropTypes from ‘prop-types’;

const ChildCompo = props => {
  const {who, order, children} = props;
  return <div>{who}님은 {order} {children} 주세요</div>;
};

export default ChildCompo;