React) 컴포넌트의 종류, 컴포넌트 생성해보기

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
[리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다.

 

컴포넌트의 종류

 

함수형 컴포넌트

 

import React from 'react';
import './App.css'

function App() {
  const name = '채니';
  return <div className="react">{name}</div>
}

export default App;

함수형 컴포넌트의 장점

• 선언이 편리
• 메모리 자원을 아낄 수 있음 (클래스형 컴포넌트에 비해)
• 빌드 후 배포할 때도 결과물의 파일 크기가 더 작음

 

함수형 컴포넌트의 단점

• state와 라이프사이클 API의 사용 불가 (단, v16.8 이후 Hooks를 통해 해결)

 

클래스형 컴포넌트

• 반드시 render 함수가 있어야하고 JSX를 반환해야함

import { Component } from 'react';
import './App.css'

class App extends Component {
  render() {
    const name = '채니';
    return <div className='react'>{name}</div>;
  }
}

export default App;

클래스형 컴포넌트의 장점

• state와 라이프사이클 API 사용 가능
• 임의 메소드 정의 가능

 

---

컴포넌트 생성해보기

1.  파일 만들기
2. 코드 작성하기
3. 모듈 내보내기 및 불러오기

 

① MyComponent.js 파일 생성

src → 오른쪽 마우스 → New File로 파일을 생성해줍니다.

 

② 코드 작성하기

const MyComponent = () => {
    return <div>나의 새롭고 멋진 컴포넌트!</div>
};

export default MyComponent;

함수형 컴포넌트로 작성해보았습니다.

 

※ 화살표 함수란?

기존 function과 서로 가리키고 있는 this 값이 달라 용도가 다릅니다.

function BlackDog() {
    this.name = '흰둥이';
    return {
        name : '검둥이',
        bark : function() {
            console.log(this.name + ' : 멍멍!');
        }
    }
}

const blackDog = new BlackDog();
blackDog.bark(); // 검둥이 : 멍멍!

function WhiteDog() {
    this.name = '흰둥이';
    return {
        name : '검둥이';
        back : () => {
            console.log(this.name + ' : 멍멍!');
        }
    }
}

const whiteDog = new WhiteDog();
whiteDog.bark(); // 흰둥이 : 멍멍!

 

일반 함수와 화살표 함수의 차이?

일반 함수는 자신이 종속된 객체를 this로 가리키고,

화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.

 

☆ 꿀팁!

Reactjs Code Snippet 확장 프로그램을 설치했다면, 간편하게 컴포넌트 코드 완성할 수 있음.

rsc + Enter → 함수형 컴포넌트 생성

rcc + Enter → 클래스형 컴포넌트 생성

 

③ 모듈 내보내기 및 불러오기

 

모듈 내보내기(export)

export default MyComponent;

다른 파일에서 이 파일을 import할 때 선언한 MyComponent 클래스를 불러오도록 설정해줍니다.

 

모듈 불러오기(import)

App.js

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent />
}

export default App;

import 구문으로 생성한 MyComponent 컴포넌트를 불러와 브라우저에 랜더링 해주었습니다.