Props

Props

---

부모 컴포넌트가 자식 컴포넌트에게 전달해주는 값

<Child value1="value2">    이떄 value2가 props 

class MyName extends Component {

render() {

return <div>안녕하세요 {this.props.name}</div>;

}

}

this.props.name에 부모가 넘겨준 값이 표시가된다

위에서 만든걸 사용하려면

import MyName from "./MyName";

class App extends Component {

render() {

return <MyName name="테스트" />;

}

}

자식 컴포넌트를 불러오고  name 값을 넘겨준다 

defaultProps

---

만약 name값을 실수로 넘겨주지않는경우는 defaultProps를 설정하여 해결할수있다

static defaultProps = {

name: "기본이름"

};

MyName.defaultProps = {

name: "velopert"

};

defaultProps를 설정하는 방법은 2개가있다 위의방법이 좀더 최신방법이지만 둘다 적용되는건 같다

함수형 컴포넌트

---

단순히 데이터를 보여주기만 한다면 함수형 컴포넌트가 좀더 좋을수있다

const MyName = ({ name }) => {

return <div>안녕하세요 123{name}</div>;

};

함수형 컴포넌트로 생성시 Component를 사용하지않는다

( {name} )은 비 구조화 할당문법으로 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 을 참조

간단하게 설명하면 값을 전달할때 Mapping하여 전달한다

함수형 컴포넌트는 초기 마운트시 좀더 속도가 빠르고 기능이 별로없기때문에 불필요한 메모리를 사용하지않는다 

하지만 컴포넌트가 적다면 성능차이가 크게 나지않지만  컴포넌트가 많아지면 class와 비교했을때 함수형 컴포넌트가 조금 더 빠르다