리액트 컴포넌트 component 함수형, 클래스형 (1)

📌개요

리액트 React의 꽃이라 불릴 정도로 컴포넌트는 핵심 개념 중 하나, 이는 사용자 인터페이스(UI)를 구축하는 기반이다.

• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수.
• 컴퓨넌트 이름은 항상 대문자로 시작하도록 한다.(리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다.)
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

리액트는 컴포넌트를 생성할 때 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용하는 export를 사용한다.

리액트는 JavaScript 내부에 마크업 삽입이 가능한데, 실제로 HTML과 맞는건 아니고, JSX라는 자식이 그렇게 해준다고 예약어가 겹치는 부분들을 해결하기 위해 낙타 등마냥 대문자가 하나씩 튀어나오는 camelCase를 적용

📌컴포넌트 예시

1) 함수형 컴포넌트

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

2) 클래스형 컴포넌트

 - 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다. (리액트 생명주기는 따로 조금더 자세히 알아보도록 한다.)
- 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다.

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

 - 간단한 예제이지만, 함수형 컴포넌트가 사용하기 더 쉬워 보인다.    이에 주로 함수형 컴포넌트를 사용하지만, 함수형 컴포넌트로 하지 못하는 작업을 처리할 때가 있는데 이때 클래스형 컴포넌트를 활용하니 둘다 알아보자.

실사용 사례

 - Header, 메인, Footer로 간단하게 레이아웃을 나눠보자.

1) src에 component폴더를 생성한다

2-1) 함수형 컴포넌트 생성

 - 해당 폴더 하위에 다음 파일을 생성하자.
- Header.js, Footer.js, Main.js 생성
- 하기와 같이 입력 하거나, Reactjs Code Snippets를 설치했다면 rsf (React Stateless Functional Component의 약자)를 치면 편하게 생성할 수 있다.

import React from 'react';

function Header(props) {
  return (
    <div>
      <header>
       <h1>헤더입니다.</h1>
      </header>
    </div>
  );
}

export default Header; //다른 JS파일에서 불러올 수 있도록 내보내주기

import React from 'react';

function Header(props) {
  return (
    <div>
      <header>
       <h1>헤더입니다.</h1>
      </header>
    </div>
  );
}

export default Header; //다른 JS파일에서 불러올 수 있도록 내보내주기

function Footer(props) {
  return (
    <div>
      <footer>
       <h1>푸터입니다.</h1>
      </footer>
    </div>
  );
}

export default Footer; //다른 JS파일에서 불러올 수 있도록 내보내주기

import React from 'react';

function Main(props) {
  return (
    <div>
      <main>
        <h1>아 하기싫다..</h1>
      </main>
    </div>
  );
}

export default Main; //다른 JS파일에서 불러올 수 있도록 내보내주기

2-2) App.js 에서 해당 컴포넌트 조합 하기

import React, { Component } from 'react'; // 리액트를 구현할 수 있는 플러그인을 연결
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';
// JS파일에 외부 파일을 불러오는 것이기 때문에 "import" 키워드를 사용한다. 
// 같은 JS파일은 확장자를 사용하지 않는다. 

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App; //다른 JS파일에서 불러올 수 있도록 내보내주기

고럼 이렇게 나옵니다.

3-1) 클래스형 컴포넌트 생성

 - Header.js, Footer.js, Main.js 생성 (함수형 컴포넌트 생성했다면, 내용만 수정)
- 하기와 같이 입력 하거나, Reactjs Code Snippets를 설치했다면 rcc (React Class Component의 약자 )를 치면 편하게 생성할 수 있다.

import React, { Component } from 'react';

class Header extends Component {
    render() { //HTML을 웹 페이지에 렌더링 한다. 
        return (
            <div>
                <header>
                    <h1>헤더입니당.</h1>
                </header>
            </div>
        );
    }
}

export default Header; //다른 JS파일에서 불러올 수 있도록 내보내주기

head부분만 구현

혼용도 가능 텍스트

📌render()

render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드입니다.

이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것 중 하나를 반환해야 합니다.

React 엘리먼트. 보통 JSX를 사용하여 생성됩니다. 예를 들어,