[React] props

props는 propperties를 줄인 말로 컴포넌트 속성을 설정할 때 사용하는 요소다

 

props값은 컴포넌트를 불러와 이용하는 부모 컴포넌트에서 설정가능하다고 볼 수 있습니다. 

 

간단한 예시를 통해서 props에 대해서 알아보겠습니다. 

 

 

1.JSX 내부에서 props 렌더링

 

간단합니다 JSX내부에서 {} 기호로 감싸 주기만 하면 됩니다.

 

import React from 'react';

const Component1 = props => {
	return<div> 이 사람의 이름은 {props.name}이다.</div>'
};

export default Component1

 

2. 컴포넌트 사용시 props 값 지정.

 

 

App.jsf를 통해 Component1.js의 파일을 import 하고 return 값에 export 값으로 지정해준 Component1을 입력하고 

 

yarn start를 진행하면 

 

 

결과화면

 

3. defaultProps

 

props 값을 따로 지정하지 않고 보여줄 default 값 지정하는 법에 대해서 예시를 보겠습니다.

 

 

 

 

Component1.defaultProps ={name : "후아유"} 지정을 통해 출력이 가능함을 알 수 있습니다.