JSX 내부에서 props 설정하기

import React from 'react';

const Mycomponent = (props) => {
  return <div> 안녕하세요. 저의 이름은 {props.name} 입니다.</div>;
};

export default Mycomponent;

Mycomponent.js 를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정하자. props 의 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props 를 랜더링할 때는
JSX 내부에서 {} 로 감싸주어야 한다.

컴포넌트를 사용할 때 Props 값 지정하기

• App.js 컴포넌트

import React from 'react';
import Mycomponent from './Mycomponent';

const App = () => {
  return <Mycomponent name="react">;
};

export default App;

props 기본값 설정 : defaultProps

• Mycomponent.js

import React from 'react';

const Mycompomemet = props => {
 return <div> 안녕하세요. 저의 이름은 {props.name} 입니다. </div>;
 };
 
 Mycomponent.defaultProps = {
  name: '기본이름'
  };
  
 export default Mycomponenet;

태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props 가 있는데, 이는 childeren 이다.

• App.js

import React from 'react';
import Mycomponent from './Mycomponent';

const App = (props) => {
 return <Mycomponent> 리액트 </Mycomponent>
 };
 
 export defualt App;

• Mycomponent.js.

import React from 'react';

const Mycomponent = props => {
 return (
   <div>
     안녕하세요. 저의 이름은 {props.name} 입니다.
     <br /> childeren 값은 {props.childeren} 입니다.
   </div>
   );
  };
  
  Mycomponent.defaultProps = {
   name: '기본이름'
   };
   
 export default Mycomponent;