React를 사용하는 이유

1. 가독성: React는 복잡하고 긴 HTML 태그를 컴포넌트(component)로 분리해 사용한다. 컴포넌트화 했을 때 코드 가독성이 좋아진다.
2. 재사용성: 모든 컴포넌트는 필요한 곳에 재사용할 수 있어 새롭게 코드를 짜지 않아도 되므로 효율적이다.
3. 유지보수: 버그, 개선 이슈가 있을 때 동시다발적으로 변경 내용이 업데이트되기 때문에 유지보수가 쉽다.

Component

• 재사용 가능한 각각의 독립된 모듈 (UI 구성 단위)특징
• 동일 코드가 반복되는 부분을 하나의 component로 만들어서 같은 디자인의 tag가 필요한 곳마다 재사용할 수 있다.
  (하나의 컴포넌트에 필요한 HTML, CSS, JavaScript를 모두 합쳐서 만들 수 있다.)
• 컴포넌트는 함수와 비슷한데, React component에서는 input을 props, return은 화면에 보여져야할 React요소가 된다.

Class vs Functional Component

컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다.

• Class형 컴포넌트(Class Component)
• 함수형 컴포넌트(Functional Component)

Class Component

import React from 'react';

class Component extends React.Component {
  render() {
    return (
    	<div>
      		<h1>This is Class Component!</h1>
        </div>
    )
  }
}

export default Component;

• class로 컴포넌트를 만드려면React.Component 를 extend해서 생성한다.
• 컴포넌트를 생성할 때 render() 메서드는 무조건 정의해야하고, return도 해주어야 한다.

Functional Component

import React from 'react';

function Component = () => {
    return (
    	<div>
      		<h1>This is Class Component!</h1>
        </div>
    )
  };

export default Component;

Component 사용

Importing React

• React를 사용하기 위해서는 우선 React 라이브러리를 가져와야 한다.
• import를 하게 되면 React가 작동하고, JSX와 컴포넌트들을 사용할 수 있게 된다.
  import React from 'react'; (최상단에 표기)
• 컴포넌트는 함수/class 이름으로 사용할 수 있다. 태그처럼 <Welcome />으로 작성한다.

JSX 대문자

• React 컴포넌트의 첫 문자는 대문자로 시작한다. 이는 HTML 태그와 컴포넌트 인스턴스 간의 차이를 보여준다.

ReactDOM.render()

• React를 실행시키기 위한 메서드로 첫번째 인자에 '컴포넌트 인스턴스'를 넣어준다.
  ReactDOM.render(<MyComponentClass />, document.getElementById('app'));