[React-Basic-Hooks] 2. React Element & React Component

[beecomci]

React Element

• type과 props를 가지는 JS 객체 (객체라는 개념 자체 중요)
  • const element = <div>Hello</div> 처럼 객체기 때문에 변수에 담을 수 있음
• jsx
  • JS 문법이 아니기 때문에 브라우저에서 바로 render는 안되고, babel을 사용해서 js로 변환해야 브라우저에서 인식 가능
• jsx로 만든 element는 결국 React.createElement 형태로 변환됨

// React Element 생성
React.createElement(
  'div', // type
  { className: 'greeting' }, // props
  'Hello World!' // children
)

// 만든 결과
{
  type: 'div',
  props: {
    className: 'greeting',
    children: 'Hello World!'
  }
}

// with jsx
// 좀 더 선언적으로 보인다는 장점
const button = (
<button className='button button-blue'>
  <b>
    OK!
  </b>
</button>
);

// without jsx
const button = React.createElement(
  'button',
  { className: 'button button-blue' },
  React.createElement(
    'b',
    null,
    'OK!'
  )
);

React Component

• props는 전달 받아서 React Element를 반환하는 function or class
  • class에서는 React Element가 아닌 render 메소드를 반환하는 형태
  • Hook이 나온 이유로는 class component를 사용해야 하는 이유가 거의 없어져서 강의에서는 함수형 component 집중
• React element tree를 encapsulate하는 역할
  • 로직을 component에 담아서 재사용이 가능하도록
  • 재사용되면서 조금씩 변경되어야하는 부분들은 props로 제어 가능

function Button(props) {
  return (
    <button className={`button button-${props.color}`}>
      <b>
        {props.children}
      </b>
    </button>
  )
}

or

// 클릭했을 때 동작 같은 것들도 props로 설정 하고, 이벤트 핸들러를 붙이면 동작 가능
const Button = ({ color = 'blue', children = 'OK'}) => (
  <button className={`button button-${color}`}>
    <b>
      {children}
    </b>
  </button>
)

  <Button color='blue'>
    OK!
  </Button>

React.createElement(
  Button, // 위처럼 string이 아닌 component 정의를 넘김
  { color: 'blue' },
  'OK!'
);

// 만들어지는 객체 
{
  type: Button, // string이 아닌 객체를 가리킴
  props: {
    color: 'blue',
    children: 'OK!'
  }
}

// destructuring X 
function Button(props) {
  return (
    <button className={`button button-${props.color}`}>
      <b>
        {props.children}
      </b>
    </button>
  )
}

// destructuring O
function Button({ color = 'blue', children = 'button }) {
  return (
    <button className={`button button-${color}`}>
      <b>
        {children}
      </b>
    </button>
  )
}