#2 리액트 컴포넌트

📍1. 리액트 컴포넌트란 ? 

-  리액트로 만들어진 앱을 이루는 최소한의 단위 

- 항상 대문자로 시작 

- 함수형 컴포넌트, 클래스 컴포넌트 

- 데이터(props)를 입력받아 state 상태에 따라 DOMnode를 출력 

 

📍1) 함수형 컴포넌트 

- 주로 이거 이용

- 함수 이용

- export를 이용해 다른 파일에서도 이용할 수 있도록 함 

ex ) 

import React from 'react';

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

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

 

기본코드 단축키 ) 

- Reactjs Code Snippets 설치 후 'rafce' 입력 

 

예제 ) 

import React from 'react';

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

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

 

import React from 'react';

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파일에서 불러올 수 있도록 내보내주기

이후 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파일에서 불러올 수 있도록 내보내주기

 

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파일에서 불러올 수 있도록 내보내주기

 

 

기본코드 단축키 ) 

- Reactjs Code Snippets 설치 후 'rcc' 입력 

 

import React, { Component } from 'react';

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

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

import React, { Component } from 'react';

class Footer extends Component {
    render() {
        return (
            <div>
                <footer>
                    <h1>푸터입니다.</h1>
                </footer>
            </div>
        );
    }
}

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

 

import React, { Component } from 'react';

class Main extends Component {
    render() {
        return (
            <div>
                <main>
                    <h1>안녕하세요. 갓대희 입니다.</h1>
                </main>
            </div>
        );
    }
}

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

 

 

이후 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파일에서 불러올 수 있도록 내보내주기