[React] 2 - ES6 문법 / Component

goal

• REACT에 필요한 자바스크립트 ES6문법에 대해서 알아보자.

1. 템플릿 문자열 (template string)

• `` (백틱)으로 표현하는 문자열

2. 전개 연산자 (spread operator)

• 나열된 자료를 추출 or 연결시 사용
• 배열 [ ], 객체 { }, 함수인자 표현식 ( ) 에서만 사용한다.
• ...으로 표현한다.

component

• 컴포넌트는 js의 함수와 유사하다.
• props라는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react element를 반환한다.

rendering

• react element는 DOM 태그로 나타낼 수 있다.
  const element = <div>이윌리</div>

• react element는 내가 생성한 컴포넌트로도 나타낼 수 있다.
  const element = <Willy name = "willy LEE" />

  • react가 위와 같이 사용자가 정의한 컴포넌트로 작성한 엘리먼트를 발견하면, JSX 어트리쀼트와 자식을 해당 컴포넌트에 단일 객체로 전달한다.
  • 이 객체를 props라고 한다.

• 렌더링 예시

  • 엘리먼트로 ReactDOM.render()를 호출합니다.
  • React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
  • Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
  • React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Extracting 예

function formatDate(date) {
  return date.toLocaleDateString();
}

function Avatar(props) {
  console.log(props)
  //Object {
  //  user : Object {
  //    avatarUrl : "https://placekitten.com/g/64/64",
  //    name : "Hello KItty"
  //  }
  //}
  console.log("아바타 props------")
  return (
   <img className = "Avatar"
     src = {props.user.avatarUrl}
     alt = {props.user.name}
     />
  )
}

function UserInfo(props) {
  console.log(props)
  // Object {
  //  user : Object {
  //    avatarUrl : "https://placekitten.com/g/64/64",
  //    name : "Hello KItty"
  //  }
  //}
  console.log("유저인포 props -------")
  return (
  <div className = "UserInfo">
      < Avatar user = {props.user} />
      <div className = "UserInfo-name"> 
        {props.user.name}
      </div>
  </div>
  )
}

function App(props) {
  console.log(props)
  // Object {
  // date : [object Date] {},
  // text : "I hope you enjoy learning React!"
  // author : Object {
  //    avatarUrl : "https://placekitten.com/g/64/64",
  //    name : "Hello KItty"
  //  }
  //}
  console.log("앱 props ------")
  return (
    <div className="Comment">
      < UserInfo user = {props.author} />
	// { user : {props.author} } 처럼 속성(props)으로 들어간다	
      <div className = "Commnt-text">{props.text}</div>
      <div className = "Comment-date">{formatDate(props.date)}</div>
    </div>
    
      // <div>
      // <div className="UserInfo">
      //   <img className="Avatar"
      //     src={props.user.avatarUrl}
      //     alt={props.user.name}
      //   />
      //   <div className="UserInfo-name">
      //     {props.author.name}
      //   </div>
      // </div>
      // <div className="Comment-text">
      //   {props.text}
      // </div>
      // <div className="Comment-date">
      //   {formatDate(props.date)}
      // </div>
      // </div>
      
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};


ReactDOM.render(
  <App
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);