#props

⁎ props는 부모가 자식한테 전달 <child value='value' /> 에서 child 옆에 value이 props

 

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

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

  export default App;

import React, {Component} from 'react';

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

}

export default Myname;

⁎제 이름은 리액트입니다 이렇게 나오는 이유

주어진 코드에서 App 컴포넌트는 Myname 컴포넌트를 렌더링하는 역할

Myname 컴포넌트는 name이라는 props를 받아와 해당 값을 출력하는 역할

 

만약에 name에다가 props를 안주게 된 경우

static defaultProps로 수정해줄수 있다.

 

 

그리고 component를 만들때 class를 사용해서 만드는데 또 다른 방법이 있다.

바로 함수형 component 생성 단순히 props만 받아와서 보여주는 기능

 

 

함수형 컴포넌트를 사용하면 더 이상 React에서 Component를 불러오지 않아도 된다.

React는 냅둬야 하는데 내부적으로 JSX가 사용될때는 필요하기 때문이다.

({name})=>은 비구조화 할당

 

함수형 컴포넌트의 장점(메모리 절약, 조금더 실행속도 빠름, 더 간단함)