React | props 사용하기

🔷리액트를 다루는 기술 #7
 
 
🔵props ?
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
 
 
🔵 JSX 내부에서 props 렌더링
props를 렌더링 할 때, JSX 내부에서 { } 기호로 감싸주어 사용하면 된다.
 

const MyComponent = props => {
    return <div> 이름 : {props.myName}</div>;
};

export default MyComponent;

 
 
🔵 컴포넌트 사용시 props 값 지정하기

import MyComponent from "./MyComponent";

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

export default App;

 
App.js (부모컴포넌트)에서 MyComponent (자식컴포넌트) 를 불러와서 사용할때 ,myName이라는 props를 지정해줄 수 있다.
이때 myName 은 MyComponent 내부에서 사용하는 값이고, 이 값을 App.js에 있는 name이라는 값으로 지정 가능하다.
 
 
🔵 props 기본 값 설정하기 : defaultProps
 
만약 MyComponent에서 props로 myName 을 전달받지 않았다면?
이름 : 
로 아무 것도 보여지지 않을 것이다.
 
따라서 이때

const MyComponent = props => {
    return <div> 이름 : {props.myName}</div>;
};

MyComponent.defaultProps = {
    myName : '기본이름'
}

export default MyComponent;

 
defaultProps를 사용하여 기본 값을 설정할 수 있다.
 
 
🔵컴포넌트 태그 사이의 내용을 보여줄 때 : children
 

import MyComponent from "./MyComponent";

function App() {
  const name = '리액트'
  return (
    <MyComponent>하이</MyComponent>
  );
}

export default App;

 
MyComponent 태그 사이에 작성한 "하이" 라는 문자열을 MyComponent 내부에서 보여주고 싶을 때는
props.children 값을 사용하면 된다.
 

const MyComponent = props => {
    console.log(props.children)
    return (
        <div> 
            이름 : {props.myName}
            <br/>
            children 값은 : {props.children} 입니다.
        </div>
    );
   
};

MyComponent.defaultProps = {
    myName : '기본이름'
}

export default MyComponent;

 
결과

 
🔵비구조화 할당 문법으로 props 추출
위에서 props 값을 조회할 때마다 props.~ 로 앞에 props라는 키워드를 사용하고 있다.
이를 편리하게 하기위해 ES6의 비구조화 할당 문법을 사용하면, 내부 값을 바로 추출 할 수 있다.
 

const MyComponent = props => {
    const {myName, children} = props;
    return (
        <div> 
            이름 : {myName}
            <br/>
            children 값은 : {children} 입니다.
        </div>
    );
   
};

MyComponent.defaultProps = {
    myName : '기본이름'
}

export default MyComponent;

 
비구조화 할당은 ? 
객체에서 값을 추출하는 문법이다.
이는 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있다.
 
만약, 함수의 파라미터가 객체라면, 그 값을 바로 비구조화해서 사용가능하다.

const MyComponent = ({myName, children}) => {
    return (
        <div> 
            이름 : {myName}
            <br/>
            children 값은 : {children} 입니다.
        </div>
    );
   
};

MyComponent.defaultProps = {
    myName : '기본이름'
}

export default MyComponent;

 
 
 
🔵 propTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나, props의 타입을 지정할 때 propsType을 사용한다.
 

import PropsTypes from 'prop-types';

const MyComponent = ({myName, children}) => {
    return (
        <div> 
            이름 : {myName}
            <br/>
            children 값은 : {children} 입니다.
        </div>
    );
   
};

MyComponent.defaultProps = {
    myName : '기본이름'
}

MyComponent.propTypes = {
    myName : PropsTypes.string
};

export default MyComponent;

 
myName 값은 무조건 문자열 형태로 전달이 되어야 된다는 의미이다.
 
 
🔵 isRequired를 사용하여 필수 propTypes 설정
propTypes를 지정하지 않았을 때, 경고메세지를 띄워 주는 방법은 ?
propTypes를 지정할 때, 뒤에 isRequired를 붙여주면 된다.
 

import PropsTypes from 'prop-types';

const MyComponent = ({myName, facvoriteNumber,children}) => {
    return (
        <div> 
            이름 : {myName}
            <br/>
            children 값은 : {children} 입니다.
            <br/>
            제가 좋아하는 숫자는 {facvoriteNumber}
        </div>
    );
   
};

MyComponent.defaultProps = {
    myName : '기본이름'
}

MyComponent.propTypes = {
    myName : PropsTypes.string,
    facvoriteNumber : PropsTypes.number.isRequired
};

export default MyComponent;

 
 
favoriteNumber를 isRequired 설정을 한 후
App.js에서 favoriteNumber을 지정해주지 않았을 때

import MyComponent from "./MyComponent";

function App() {
  const name = '리액트'
  return (
    <MyComponent myName={name}>하이</MyComponent>
  );
}

export default App;

이와같은 오류가 뜬다.
 
그래서 isRequired로 props 필수값 지정이 가능하다.
 
 
🔵 PropTypes 종류

• array
• arrayOf
• bool
• func
• number
• object
• string
• symbol
• node
• instanceOf
• oneOf
• oneOfType
• objectOf
• shape
• any

공식 문서 참고  :  https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 검사 – React

 
🔵 클래스형 컴포넌트에서 props 사용
 
클래스형 컴포넌트에서 props 사용할 시에는
render 함수에서 this.props를 조회하면 된다.

import PropsTypes from 'prop-types';
import { Component } from 'react';


class MyComponent extends Component {
    render() {
        const {myName, facvoriteNumber,children} = this.props;
        return (
            <div> 
            이름 : {myName}
            <br/>
            children 값은 : {children} 입니다.
            <br/>
            제가 좋아하는 숫자는 {facvoriteNumber}
        </div>
        );
    }
}


MyComponent.defaultProps = {
    myName : '기본이름'
}

MyComponent.propTypes = {
    myName : PropsTypes.string,
    facvoriteNumber : PropsTypes.number.isRequired
};

export default MyComponent;

 
 
클래스형 컴포넌트에서 defaultProps와 propTypes 설정할 때 class 내부에서 지정하는 방법도 있다.
 

import PropsTypes from 'prop-types';
import { Component } from 'react';


class MyComponent extends Component {
    static defaultProps = {
        myName : '기본이름'
    };

    static propTypes = {
        myName : PropsTypes.string,
        facvoriteNumber : PropsTypes.number.isRequired
    };
    render() {
        const {myName, facvoriteNumber,children} = this.props;
        ......