[React] 리액트 기초부터(4)

Props

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

<Child value="value" /> => value가 하나의 props가 된다.

 

사용예제

부모)

import React, {Component} from 'react';

class MyName extends Component{
  render(){
    return(
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

export default MyName;

자식)

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

class App extends Component {
  render() {
    return (
      <MyName name="센닝"/>
    );
  }
}

export default App;

 

Default Props 값 설정 )

1) 최신 자바스크립트 문법

import React, {Component} from 'react';

class MyName extends Component{
  static defaultProps = {
    name: '세니야'
  }
  render(){
    return(
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

export default MyName;

2)

import React, {Component} from 'react';

class MyName extends Component{

  render(){
    return(
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b>입니다.
      </div>
    );
  }
}

MyName.defaultProps = {
  name: 'seniii'
};

export default MyName;

 

함수형 컴포넌트)

import React from 'react';

const MyName = ({name}) => {
  return(
    <div>
      안녕하십니까 이곳은 {name} 블로그 입니다.
    </div>
  )
}
MyName.defaultProps={
  name:'senii'
}

export default MyName;

함수형 컴포넌트가 초기 마운트 속도가 미세하게 더 빠르고 불필요한 기능이 없어서 메모리 자원도 덜 사용한다.

보여주기만 하는 용도에서 속도 최적화 가능

 

 

*이 글은 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌를 토대로 공부를 하며 작성하였습니다.