[React] Props

props란

컴포넌트 속성을 설정할 때 사용하는 요소

props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

(현재는 app.js)

 

props값은 컴포넌트 함수의 파라미터로 받아와서 사용 가능

props를 렌더링 할 때에는, JSX내부에서 {}기호로 감싸준다.

import React from 'react';
 
const MyComponent = props => {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
export default MyComponent;

 

App.js 컴포넌트

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" ></MyComponent>;
};
 
export default App;

 

이때 props 값을 따로 지정하지 않았을 때, 보여줄 기본값을 설정하는 "defaultProps"

 

 

"defaultProps" 설정 방법

	
import React from 'react';
 
const MyComponent = props => {
    return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;

 

---

태그 사이의 내용을 보여주는 Children

 

App컴포넌트 수정

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;

 

<MyComponent>리액트</MyComponent>;에서 작성한 리액트 라는 문자열을

MyComponent 내부에서 보여주려면,

props.children 값을 보여줘야 한다.

 

import React from 'react';
 
const MyComponent = props => {
    return (
        <div>
            안녕하세요, 제 이름은 {props.name}입니다. <br />
            children 값은 {props.children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;

이렇게 앞에 props.를 붙이는 것보다 간편하게 하기 위해

ES6의 비구조화 할당 문법이 있다.

 

import React from 'react';
 
const MyComponent = props => {
    const { name, children } = props;
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;

import React from 'react';
 
const MyComponent = ({ name, children }) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
export default MyComponent;

---

 

PropTypes 

컴포넌트의 필수 props를 지정하거나, 타입을 지정할 때 사용

(import prop-types 후 사용)

import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({ name, children }) => {
    return (
        <div>
            안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children}
            입니다.
        </div>
    );
};
 
MyComponent.defaultProps = {
    name: '기본 이름'
};
 
MyComponent.propTypes = {
    name: PropTypes.string
};
 
export default MyComponent;

이렇게 설정한다면 name값을 무조건 문자열 형태로 전달해야 된다.

 

app.컴포넌트

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React">리액트</MyComponent>;
};
 
export default App;

 

경고메시지 띄우기

: isRequired 붙이기

	
import React from "react";
import PropTypes from "prop-types";
 
const MyComponent = ({ name, favoriteNumber, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
      <br />
      제가 좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: "기본 이름"
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

app 컴포넌트

import React from "react";
import MyComponent from "./MyComponent";
 
const App = () => {
  return ( 
  <MyComponent name="리액트" favoriteNumber={2}>
    리액트
  </MyComponent>
  );
};
 
export default App;

 

 

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

render함수에서 this.props 조회하여 사용

import React, { Component } from "react";
import PropTypes from "prop-types";
 
class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props;
 
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}
 
MyComponent.defaultProps = {
  name: "기본 이름"
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

defaultProps와 propTypes를 class 내부에서 지정

	
import React, { Component } from "react";
import PropTypes from "prop-types";
 
class MyComponent extends Component {
  static defaultProps = {
    name: "기본 이름"
  };
 
  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
 
  render() {
    const { name, favoriteNumber, children } = this.props;
 
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}
 
export default MyComponent;

defaultProps와 propTypes를 반드시 사용해야하는 것은 아니나,

React를 사용해 다른 개발자와 협업시 해당 컴포넌트에 어떤 props가 필요한지 알수있어서 능률이 오른다.

 

 

실습하기

 

app.js

import React from 'react';
import { Fragment } from 'react';
import MyComponent from './components/MyComponent';

function App() {
  return (
    <Fragment>
      <MyComponent food=" POKE" />
    </Fragment>
  );
}

export default App;

 

jsx (자식 컴포넌트)

import React from 'react';

export default function MyComponent({ food }) {
  return (
    <div>
      <h1>
        제가 좋아하는 음식은<p style={{ color: 'red' }}>{food}</p>입니다.
      </h1>
    </div>
  );
}

MyComponent.defaultProps = {
  food: '양념굴비',
};

 

 

import React from 'react';
import snow from '../snow.jpg';

export default function Best() {
  return (
    <div style={{ textAlign: 'center', backgroundColor: 'bisque' }}>
      <h1 style={{ color: 'orange', textAlign: 'center' }}>
        이번주 베스트셀러
      </h1>
      <img src={snow} alt="백설공주" style={{ width: '300px' }}></img>
      <h2>백설공주에게 죽음을</h2>
      <h3 style={{ textAlign: 'left', marginLeft: '450px' }}>
        저자 : 넬레 노이하우스 <br /> 번역 : 김진아 <br /> 가격 : 12,420원{' '}
        <br /> 구분 : 독일소설
      </h3>
    </div>
  );
}

app.js

import React from 'react';
import { Fragment } from 'react';
import Best from './components/Best';

function App() {
  return (
    <Fragment>
      <div>
        <Best />
      </div>
    </Fragment>
  );
}

export default App;

 

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

export default class TextProps extends Component {
  render() {
    const { text, valid } = this.props;
    return (
      <div>
        <h1>App 컴포넌트에서 넘겨준 {text}입니다.</h1>
        <button onClick={valid}>콘솔 메세지</button>
      </div>
    );
  }
}

TextProps.defaultProps = {
  text: '이건 기본 text props 입니다.',
};

TextProps.propTypes = {
  text: PropTypes.string.isRequired,
};

import React from 'react';
import { Fragment } from 'react';
import TextProps from './components/TextProps';

function App() {
  return (
    <Fragment>
      <div>
        <TextProps
          text="텍스트 props"
          valid={() => {
            console.log('콘솔 띄우기');
          }}
        />
      </div>
    </Fragment>
  );
}

export default App;