[React] Component와 Props

• 리액트(React)에서 컴포넌트(Component)는 자바스크립트 함수와 흡사하다.
• 또한 이러한 컴포넌트는 프롭스(Props)를 입력으로 받아서 리액트 요소를 반환하는 형태로 동작한다.
• 부모컴포넌트에서 자식컴포넌트로 데이터를 전달할때 사용
• 고정적인 데이터를 전달할때 사용
• 프롭스(Props)를 사용해서 다양한 데이터를 속성(Property)형태로 전달할 수 있다.

//사용자 컴포넌트
//한명의 사용자를 어떻게 화면에 그릴수 있는지 user함수를 이용해서 명시
function User(props){
  return (
    <div>
      <img src = {props.user.imageUrl}/>
      &nbsp;
      <strong>{props.user.name}</strong>
    </div>
  );
}
//게시판 내용 컴포넌트
function Board(props){
  return (
    <section>
      <User user={props.user}/>
      {props.title}
      <hr/>
      {props.content}
    </section>
  );
}

const board = {
  title : '게시글 제목입니다.',
  content : '게시글 내용입니다. 반갑습니다.',
  user : {
    name : '김재은',
    imageUrl : 'https://placeimg.com/32/32'
  }
}

ReactDOM.render(
  <Board
    title = {board.title}
    content = {board.content}
    user = {board.user}
    />,
  document.getElementById('root')
);