Component

컴포넌트

• React에서 가장 두드러 지는 특징 중 하나로서 쉽게 생각하면 레고에서 블럭 한개와 비슷하다고 보면 된다.
• 컴포넌트의 종류에는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘어 진다.

---

클래스형 컴포넌트

• 클래스형에서는 render()가 필수적.
• 선언하기 편하며 메모리도 덜 사용.

import React , {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className='react'>{name}</div>
  }
}

export default App;

---

함수형 컴포넌트

• state와 LifeSycleAPI 사용이 불가했지만 v16.8 업데이트 이후 Hooks이 생기며 해결됨.

• React 공식메뉴얼에서는 함수형컴포넌트와 Hooks를 사용하도록 권장함.

  
  

 import React from 'react';

const App = () => {
  const name = 'react';
  return <div className='react'>{name}</div>;
}

export default App;

---

모듈 내보내기 및 불러오기

// 모듈 내보내기
import React from 'react';

const MyComponent = () => {
  const name = 'react';
  return <div className='react'>{name}</div>;
}

export default MyComponent;


// 모듈 불러오기
import React from 'react';
import MyComponent from './MyComponent'; // MyComponent컴포넌트를 사용하기 위한 선언

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

export default App;

위와 같이 다른 컴포넌트를 적용하므로써 가독성, 유지보수에 매우 편리하다.