[포스코x코딩온] 웹개발자 입문 과정 8주차 | Props

1.Props란?

 props는 properties를 줄인 표현으로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다.

 props값은 부모 컴포넌트에서 설정할 수 있다.

 

 

 가.사용 방법

  아래와 같이 MyComponent컴포넌트(자식 컴포넌트)를 수정하여 해당 컴포넌트에서

  name이라는 props를 렌더링한다고 하면 아래와 같이 코드를 작성할 수 있다.

 

  props값은 (자식)컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다.

  props를 렌더링할 때는 앞서 배웠던 것처럼 JSX내부에서 {}기호로 감싸주면 된다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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

  

  이제 App컴포넌트(부모 컴포넌트)에서

  MyComponent의 props값을 지정하는 코드는 다음과 같다.

 

  [ App컴포넌트(부모 컴포넌트) ]

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

  출력 결과 >>  안녕하세요, 제이름은 React입니다. 

 

 

 나.defaultProps 설정

  위 코드에서 부모 컴포넌트(App.js)의 name값을 지우고

  아래 코드와 같이 저장하면,

 

  [ App컴포넌트(부모 컴포넌트) ]

const App = () => {
  return <MyComponent />;
};

  출력 결과 >> 안녕하세요, 제이름은 입니다.

 

  위 처럼 props 값이 없으므로 name값이 지정되지 않는다.

 

  props 값을 부모 컴포넌트에서 지정하지 않아도 기본값으로 저장할 수 있다.

  defaultProps를 설정해주면 가능하다.

 

  defaultProps를 설정방법은 아래와 같다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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

  출력 결과 >> 안녕하세요, 제이름은 기본 이름입니다.

 

 

 다. Childern 및 구조 분해 할당

  다음으로 태그 사이의 내용을 보여주는 Children에 대해 알아보자.

  부모 컴포넌트인 App 컴포넌트에

  '<MyComponent>리액트</MyComponent>' 

  처럼 태그 사이에 내용을 추가해보면 아래와 같다.

 

  [ App컴포넌트(부모 컴포넌트) ]

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

 

  자식 컴포넌트인 MyComponent의 태그 사이에 작성한 문자열을

  MyComponent의 내부에서 보여주려면 prop.children을 사용해야한다.

 

  prop.children을 사용할 때 props.childern을 사용해서

  props.라는 키워드를 앞에 붙여줘야하는데

  매번 이런식으로 키워드를 붙이는 것이 번거로우므로, 구조 분해 할당을 사용해서 작성한다.

 

  아래 코드에서 const {name, childern} = props;

  이 부분에 해당한다. 각 name과 childern의 변수로 props를 분해 할당한 것이다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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

  출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
                      children 값은 리액트입니다.

 

  이것도 번거로우면 애초에 props를 인자로 넣어줄때,

  props 대신 {name, children}을 넣어주면 된다.

  const MyComponent = ({name, children}) =>{} 

  이런 식으로 작성하면된다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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

  출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
                      children 값은 리액트입니다.

 

 

 라.propTypes

  다음으로 propTypes를 이용하면 컴포넌트의 필수 props를 지정하거나

  props의 타입을 지정할 수 있다.

 

  컴포넌트의 propTypes를 지정하는 방법은

  먼저 코드 상단에 import구문을 사용해서 propTypes를 불러와야한다.

  import PropTypes from 'prop-types';

 

  다음으로는 아래 코드와 같이 작성한다.

  MyComponent.propTypes = { name: PropTypes.string,... };                      

  이 코드의 의미는 name값은   무조건 문자열(string)형태로 전달해야한다는 것을 의미한다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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;

  출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
                      children 값은 리액트입니다.

 

  만약 name이라는 props의 값이 string타입이 아닌 숫자형(number)이라면 

  화면에 숫자로 출력되더라도 콘솔창에 오류가 나타난다.

 

  만약 props값을 부모컴포넌트에서 넘겨주지 않았을 경우 경고 메세지를 띄울 수 있다.

  방법은 propTypes를 지정할 때 뒤에 isRequired를 붙여주면 된다.

 

  MyComponent.propTypes = { name: PropTypes.string,

  favoriteNumber: PropTypes.number.isRequired };     

 

  이렇게 지정해주고 난 뒤 부모컴포넌트인 App.js에서

  <MyComponent name="리액트" favoriteNumber={2}> 

  위처럼 favoriteNumbers라는 props값을 지정해주지 않을 경우 콘솔창에 경고가 뜬다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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;

  favoriteNumbers라는 props값을 지정해주면 다음과 같이 출력된다.

 

  출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
                      children 값은 리액트입니다.
                      제가 좋아하는 숫자는 2입니다.

 

 마. 클래스형 컴포넌트에서의 props 비교

  클래스형 컴포넌트에서 prop를 사용할 때는 render함수에서 this.props를 조회하여 사용한다.

 

  class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props;
 
    return (

 

  위에서 함수형 컴포넌트에서 props를 사용하는 방법과 비교해보면 아래와 같다.

 

함수형 컴포넌트

클래스형 컴포넌트

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;

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내부에서 지정하는 방법은 아래와 같다.

  static defaultProps = {} static propTypes = {} 을 사용한다.

 

  [ MyComponent컴포넌트(자식 컴포넌트) ]

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;