[React] 컴포넌트 속성 props

컴포넌트 속성 props

컴포넌트 속성을 설정할 때 사용하는 요소
props값은 컴포넌트를 불러와 사용하는 부모 컴포넌트(App)에서 설정할 수 있음

MyComponent.js

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

MyComponent.defaultProps = {
	name: '기본 이름'
}
 
export default MyComponent;

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

App.js

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

App.js에서 name = "React"라고 컴포넌트를 설정해줌

Children

태그 사이의 내용을 보여줌

MyComponent.js

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

App.js

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

비구조화 할당 문법(구조 분해 문법)

함수의 파라미터 부분에서도 사용 가능
props 값을 조회할 때 props.라는 키워드 붙여주지 않고 사용할 수 있음.
함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것.

MyComponent.js

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

함수형 컴포넌트에서 props를 사용할 때는 이렇게 파라미터 부분에서 비구조화 할당 문법을 사용

PropsTypes

props를 지정하거나 props의 타입을 지정할 때 사용

import PropTypes from 'prop-types';
import 구문을 사용해 propTypes 불러오기

MyComponet.js

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값은 무조건 string형태로 전달해야 된다는 것을 의미

import React from 'react';
import MyComponent from './MyComponent';

function App(){
  return(
    <>
      <MyComponent name ={2}>리액트</MyComponent>
    </>
  )
}

export default App;

App.js에서 name값을 숫자로 전달해보면 값이 나타나긴 하지만 콘솔창에 경고메시지가 나옴

isRequired

prop를 지정하지 않았을 때 경고메시지를 띄어줌

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

위의 코드를 MyComponent.js에 추가해주기

클래스형 컴포넌트에서 props

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

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 꼭 사용해야하는 것은 아니지만 협업시 능률 높아짐!!

App.js에서 props 숫자로 설정할 때 {} 여기에 넣어서 지정하기