[React] Component

---

📝 Component

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러 가지 Component로 구성되어 있습니다. Component의 기능은 단순한 템플릿이 아닌 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주고 라이프사이클 API를 이용하여 Component가 화면에서 나타나고 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있습니다.

---

📜 class형 Component

• 클래스형 Component에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 합니다.

import { Component } from 'react';

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

📜 함수형 Component

• 함수형 Component의 장점
  • 메모리 자원을 클래스형 Component보다 덜 사용합니다.
  • 클래스형 Component보다 선언하기가 편합니다.
  • 프로젝트를 환성하여 빌드한 후 배포할 때도 결과물의 파일 크기가 더 작습니다.
• 함수형 Component의 단점
  • state와 라이프사이클 API의 사용이 불가능합니다. (리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.)

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

---

📜 모듈

• 모듈 내보내기(export)

Component 제일 하단 코드를 확인해 보겠습니다.

export default App;

이 코드는 다른 파일에서 이 파일은 import할 때, 위에서 선언한 App Component를 불러오도록 설정합니다.

• 모듈 불러오기(import)

내보낸 component를 다른 Component에 불러와서 사용하는 방법입니다.

import App from './App';

const Main = () => {
    return <App />;
};
export defautl Main;

---