[React] React Component에 대하여 알아보기

안녕하세요.

이번에는 React의 Component에 대하여 알아보겠습니다.

 

그전에 VSCode에서 작업할 때 있으면 편리한 확장 프로그램을 설치하도록 하겠습니다.

 

1. VSCode 확장 프로그램

• ES7 + React/Redux/React-Native snippets v4.4.3
• React 관련 snippets 제공

 

 

2. Component

• Virtual DOM의 핵심이다.
• 기존의 웹 서비스들은 웹페이지에서 정말 작은 부분이 업데이트 되어도 페이지의 전체를 리로딩 해야한다.
• React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고, 사용자에게 부드럽고 빠른 경험을 제공한다.
• 독립적으로 구성하여 재사용이 편리 합니다.
• 데이터는 속성(props) 으로 받고, 상태(state)에 따라 View 를 변화 합니다.
• PascalCase 이름을 사용해야 한다.
• 파일명도 동일한 문법으로 사용한다.
• ex) MainHeader (O) / mainHeader (X)

 

3. 컴포넌트 - 함수형 내부 정의

src/App.js

컴포넌트를 함수 내부에도 정의 가능하지만 return이 여러 개로 보이고
가독성이 떨어져서 파일로 나눠서 사용한다.

import logo from './logo.svg';
import './App.css';

function App() {

  // 컴포넌트를 함수 내부에도 정의 가능하지만 return이 여러 개로 보이고
  // 가독성이 떨어져서 파일로 나눠서 사용한다.
  function MainHeader() {
    return (
      <h1>함수형 내부 정의</h1>
    )
  }
  
  return (
    <div className="App">
      <MainHeader />
    </div>
  );
}

export default App;

 

 

4. Components 분리 작업

component 폴더 생성

 

src/App.js

import logo from './logo.svg';
import './App.css';
import MainHeader from './components/MainHeader';

function App() {  
  return (
    <div className="App">
      <MainHeader />
    </div>
  );
}

export default App;

 

src/components/MainHeader.js

function MainHeader() {
    return (
        <h1>Hello, Component World!</h1>
    )
}

export default MainHeader;

• export default MainHeader;
• export default는 파일 내에서 1개의 모듈만 내보낼때 사용합니다.

 

 

5. Component의 종류

5-1. 클래스형 컴포넌트

• 예전에 최초로 사용되었던 컴포넌트이다.
• 컴포넌트 자체가 JS의 Class와 유사하기 때문에 자연스럽게 사용했었다.
• 리액트의 장점을 모두 활용 가능하다.
• 메모리 자원을 더 사용하고, 속도가 느리다는 단점이 있다.
• render 함수를 사용해야만 사용할 수 있다.
• 최근에는 상대적으로 가볍고 사용이 쉬운 함수형 컴포넌트에 밀리게 되었다.

// 클래스형 컴포넌트
import React, {Component} from 'react';

class MainHeader extends Component {
    render() {
        return (
            <h1>Hello, Component world!</h1>
        )
    }
}

export default MainHeader;

 

5-2. 함수형 컴포넌트

• JS에서 익숙하게 사용하였던 함수를 컴포넌트화 시켰다.
• 클래스에 비해 구조가 단순하여 코드도 단순하고, 빠르게 배울 수 있다.
• 메모리를 덜 사용하고 속도가 빠르다.
• 리액트의 중요 기능 사용이 불가능하여 제한적으로 사용했지만, Hooks 기능의 도입으로 같은 역할 수행이 가능해졌다

// 함수형 컴포넌트
function MainHeader() {
    return (
        <h1>Hello, Component World!</h1>
    )
}

export default MainHeader;

 

 

실습코드

 

 

 

 

src/App.js

import './App.css';
import ImgComponent from './components/ImgComponent';
import BtnToNaver from './components/BtnToNaver';

function App() {
  
  return (
    <div className="App">
      <ImgComponent />
      <div>
        <BtnToNaver />
      </div>
    </div>
  );
}

export default App;

 

src/components/ImgComponents.js

함수형 컴포넌트

import logo from '../mococo-01.png';

// JavaScript로 import를 하는 경우에는 src 폴더 내부까지만 사용이 가능하다.
// 다음과 같이 public 폴더 접근하면 Error가 발생한다.
// import logo from "../../public/logo192.png";

function ImgComponent () {
    return (
        <img src={logo} alt='이미지' />

        // 해당 설정으로 public 폴더에 바로 접근 할 수 있다.
        // <img src="/logo192.png" alt='이미지' />
    )
}

export default ImgComponent;

 

src/components/BtnToNaver.js

클래스형 컴포넌트

// import React, {Component} from 'react';
import {Component} from 'react';

class BtnToNaver extends Component {
    render() {
        return (
            <button><a
            href="https://www.naver.com"
            target="_blank"
            >네이버 페이지</a></button>
        )
    }
}

export default BtnToNaver;

 

 

 

이상으로 React의 컴포넌트에 대하여 알아보았습니다.

감사합니다.