React 개념 잡기 #2 (Component에 대해서)

컴포넌트(Component)

---

컴포넌트는 UI를 구성하는 독립적이고 개별적인 아주 작은 개체(entity)입니다.

이러한 컴포넌트들은 각각의 코드와 구조, API가 있습니다.

 

컴포넌트들을 모아서 UI(User Interface)를 구현하고

UI들은 사용자에게 View라는 형태로 제공됩니다.

---

컴포넌트의 장점은 코드를 재사용 가능하다는 것입니다.

---

컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 집니다.

 

함수형 컴포넌트

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

 

클래스형 컴포넌트

class App extends Component {
  render() {
    return <h1>Hello {this.props.name}</h1>;
  }
}

---

컴포넌트의 이름은 항상 대문자로 시작하기로 약속되어 있습니다.

render() {
  return (
    <div id="app">
    	<Hello></ Hello>;
    </div>
)}

---

 

컴포넌트는 props를 받아 UI가 어떻게 보여야 하는지 정의하는 React Element를 output하는 함수입니다.

React Element 란?

우리가 아래와 같은 HTML을 작성하면,

<button class='button button-blue'>
  <b>
    OK!
  </b>
</button>

React는 위 HTML에 대한 아래와 같은 객체를 생성합니다.

{
  type: 'button',
  props: {
    className: 'button button-blue',
    children: {
      type: 'b',
      props: {
        children: 'OK!'
      }
    }
  }
}

이러한 객체를 React Element라고 합니다.

 

React Elemenet는 화면에 표시하려는 항목에 대한 설명이라고 생각할 수 있습니다.
React는 이러한 객체를 읽은 후, DOM을 구성하고 최신 상태로 유지하는 데 이러한 객체를 사용합니다.

---

참고하면 좋은 글

리액트 공식문서로 배워보자 #4, 컴포넌트와 Props!

 

React에서 Stateful 대 Stateless 함수형 컴포넌트

 

Introducing React Elements – React Blog