Component와 Props의 시작

## 2021/01/09

1. Element

: React 앱을 구성하는 가장 작은 빌딩 블록!

화면에서 보이는 것들을 기술한다.

<특징>

• 변할 수 없다. ( 불변성) element가 생성된 후에는 children이나 attribute를 변경할 수 없다.
  

element를 생성하고 DOM에 rendering 시키기

const element = <h1>Hello, world!</h1>;
 ReactDom.render(
   element,
   document.getElementById('root') 
 );

element를 생성하고 변경할 수 없다면 어떻게 해아 할까???

→ 함수 형태로 작성하자 !!

Example: 1초마다 함수를 실행시켜 시간을 업데이트 시켜보자.

function tick(){
   const element=(
     <div>
       <h1>Hello, world!</h1>
       <h2>It is {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
   ReactDOM.render(
     element,
     document.getElementById('root')
   );
 }
// setInterval(tick, 1000); 
//1초마다 함수 호출되면서 element가 생성되고 새로 rendering

state change -> Compute Diff ->Re-render
시간이 바뀌고 -> 다시 계산을 하고- >다시 rendering

2. Component

→이름의 첫 글자는 항상 대문자로!

안그러면 React가 DOM태그로 인식하게 됨.

1) function component

= 자바스크립트 함수 형태

2) class component

: class 이름 extends React.Component{render(){}}

제일 흔히 많이 쓰기도 한다.

class 형식의 component Example

import React from 'react';

class Comment extends React.Component{
    render(){
        return(
            <div>
                <h1>{'My first Component'}</h1>
            </div>
        ) 
    }
}

export default Comment;

• component 합성 component안에 여러 개의 component를 쓸 수 있다. → 복잡한 화면을 여러 개의 component로 간단히 만들 수 있다!
  

• component 추출 큰 component를 작게 여러 개의 component로 쪼개자! → 재사용 가능한 많은 component를 갖고 있을 수록 개발 속도 Up!
  

3. Props (=property)

: component의 속성. 읽을 수만 있다(Read-Only)

props를 직접 바꿀 수 없고 같은 props에 대해 같은 결과를 보여준다.

4. Component와 Props

→ 쉽게 말하면 props는 입력이며 component를 통과하면서 element(출력) 만들어진다. component가 함수와 같은 역할을 한다.

이렇게 비유할 수 있당!

Props → Component → Element

재료 → 틀 → 붕어빵