(React) Component

React Component

• React로 만들어진 웹을 구성하는 최소한 단위
  • 기존의 웹 프레임워크는 MVC 방식으로 각 요소의 의존성이 높다, 재활용이 어렵다
  • Component는 MVC의 View를 독립적으로 구성이 가능하며 쉽게 만들 수 있다
• Component의 이름은 항상 대문자로 시작
• UI를 재사용이 가능한 개별적인, 독립적인 여러 조각(Components)으로 나누고, 각 조각(Component)을 개별적으로 나누어 코딩한다
• Javascript 함수와 유사하다
• 임의의 props 데이터를 받은 후 화면에 어떻게 표시되는지를 기술하는 React 객체를 반환
• 종류
  • 함수형 컴포넌트 (Functional Component)
    • 함수형에서는 함수 자체가 return
    • 생명주기가 클래스형 컴포넌트와 다르다, 리랜더링 시 함수 전체가 다시 호출, 실행된다
    • 이에 state값과 Life Cycle를 구현하기 위해서는 Hook을 사용해야 한다
  • 클래스형 컴포넌트 (Class Component)
    • 클래스형 컴포넌트에서는 render 메서드에서 return
    • state, Life Cycle API의 사용이 가능
    • 임의의 메서드를 정의할 수 있다
    • 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용

 

간단한(?) 컴포넌트 코드

App.js

import "./App.css";

import Header from "./components/Header";
import Footer from "./components/Footer";

function App() {
  return (
    <div>
      <Header />
      여기는 메인
      <Footer />
    </div>
  );
}

export default App;

 

Header.jsx

const Header = () => {
  return <div>내가 헤더다</div>;
};

export default Header;

 

Footer.jsx

const Footer = () => {
  return <div>나는 footer야</div>;
};
export default Footer;

 

Header 컴포넌트 + App.js + Footer 컴포넌트