React 공부3 (Component)

컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위를 뜻하며 재사용성을 높히고 유지보수를 용이하게 하기위해 만들어진 것이다.
컴포넌트를 생성할때는 반드시 대문자로 작성해준다.
(소문자로 쓰면 DOM객체로 인식하기 때문에 대문자로 써준다.)

클래스형 컴포넌트 작성방식

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        
      </div>
    );
  }
}

export default App;

함수형 컴포넌트 작성방식

import React from 'react';

const App = () => {
  return (
    <div>
      
    </div>
  );
};

export default App;

클래스형 컴포넌트는 예전 방식으로 예전프로젝트라면 클래스형으로 되어있을 수 있기에 알고는 있어야 한다.
최근에는 함수형 컴포넌트를 주로 사용한다.
함수형을 더 많이 쓰는 이유는 메모리 자원을 클래스형보다 덜쓰며, 컴포넌트 선언이 편하기 때문이다.

컴포넌트 선언법

import React from 'react';
import Hello from './Hello'(.js생략가능)

const App = () => {
  return (
    <div>
      <Hello />
    </div>
  );
};

export default App;

App.js에서 Hello컴포넌트를 넣을때에 위의 div안에 쓴것 처럼 셀프 클로징을 해주고
위에 Hello.js 컴포넌트를 임포트 시켜준다.