React - Props

in REACT on React, React


Props 와 State

Props와 State는 리액트에서 데이터를 다룰 때 사용된다.

Props

부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용된다.

App.js

import React, { Component } from 'react';
import MyName from './MyName'

class App extends Component {
  render() {
    return (
      <MyName name="리액트"/>
    );
  }
}

export default App;

MyName.js

import React, { Component } from 'react';

class MyName extends Component {

  static defaultProps = {
    name : '기본이름' //default props
  }
  
  render() {
    return( 
    <div>
      {this.props.name}
    </div>);
  }
}

MyName.defaultProps = {
    name : '하이' //이렇게 해도 된다.
};

export default MyName;

함수형 컴포넌트로 작성하면 아래와 같이 된다.

import React from 'react';

const MyName = ({name}) => { //객체안의 name property를 가져오겠다.
  return (
    <div>
    </div>
  )
}

MyName.defaultProps = {
    name : '하이' //이렇게 해도 된다.
};

함수형은 불필요한 기능이 없고 성능이 미세하게 좋기 때문에 단순히 어떤 게 보여질 때 사용하면 좋다.