React Component

리액트 컴포넌트란?

리액트로 만들어진 앱을 이루는 최소한의 단위를 말합니다.

컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고, 이를 통해 
새로운 컴포넌트를 쉽게 만들 수 있습니다.

 

컴포넌트는 데이터(props)를 입력받아 View(State) 상태에 따라 DOM Node를 출력하는 함수입니다.

이름은 항상 대문자로 시작해야합니다(리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급)

UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩해야하고,

props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는
React 엘리먼트를 반환합니다.

 

리액트 컴포넌트의 종류

1) 함수형 컴포넌트

우선 예시부터 보여드리겠습니다

import React from 'react';

function MyComponent(props) {
return <div>my age {props.age}</div>;
}
export default MyComponent //다른 자바스크립트파일에서 불러올수 있도록 내보내주는역할

가장 간단하게 자바스크립트 함수를 작성하는 것입니다.

export 구문은 Mycomponent 파일을 다른 파일에서 import할때 불러올수 있도록 정의한 부분이고,

여기서 import하면 js,jsx등 파일 확장자를 생략해도 자동으로 찾을 수 있습니다.

이는 웹팩 코드 검색 확장자 기능 때문이라고 합니다.

확장자의 파일 이름이 없는 경우 웹팩의 확장자 옵션(extentions)에 정의된 확장자 목록을 통해
확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 import 됩니다.

 

2) 클래스형 컴포넌트

컴포넌트 구성요소 리액트 생명주기를 모두 포함하고있다고합니다.(리액트 생명주기도 포스팅 예정)

프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다고 함.

import React from 'react';

class MyComponent extends React.Component {
constructor(props) {
super(props);
}

componentDidMount() {
}

render() {
return <div>Age,{this.props.age}</div>;
}
}

export default MyComponent;

 

컴포넌트를 활용한 간단한 레이아웃 만들기를 해보겠습니다.

우선  함수형 컴포넌트를 활용한 레이아웃 만들기부터 해보겠습니다.

 

1. src폴더에 components라는 폴더를 생성합니다.

2. 함수형 컴포넌트를 생성합니다
1)components 폴더 안에 Header.js, Main.js, Footer.js, 를 생성합니다.

Header.js

import React from 'react';

function Header(props) {
  return (
    <div>
      <header>
       <h1>헤더 파트</h1>
      </header>
    </div>
  );
}

export default Header;

Main.js

import React from 'react';

function Main(props) {
  return (
    <div>
      <main>
        <h1>메인파트</h1>
      </main>
    </div>
  );
}

Footer.js

import React from 'react';

function Footer(props) {
  return (
    <div>
      <footer>
       <h1>푸터 파트</h1>
      </footer>
    </div>
  );
}

2) App.js에서 3개의컴포넌트 조합

import React, { Component } from 'react'; 
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './components/Main';
 

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

export default App;

 

다음은 클래스형 컴포넌트를 생성 해보겠습니다

똑같이 Header.js, Main.js, Footer.js를 활용하겠습니다

1)Header.js

import React, { Component } from 'react';

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

export default Header;

2) Main.js

import React, { Component } from 'react';

class Main extends Component {
    render() {
        return (
            <div>
                <main>
                    <h1>메인 파트</h1>
                </main>
            </div>
        );
    }
}

export default Main;

3. Footer.js

import React, { Component } from 'react';

class Footer extends Component {
    render() {
        return (
            <div>
                <footer>
                    <h1>푸터 파트</h1>
                </footer>
            </div>
        );
    }
}

export default Footer;

 

간단한 레이아웃을 만드는 것까지 해보았습니다.

감사합니다.