이 글은 ‘리액트를 다루는 기술 [개정판]’을 바탕으로 스터디를 한 내용입니다.

잠깐!🧚‍♀️ 들어가기 전에 한눈에 확인하는 목차

1. 컴포넌트 선언 2가지 방식

   • 어떤 방식을 써야할까?

   1) 함수형 컴포넌트 (간단히)

   2) 클래스형 컴포넌트 (간단히)

   • 두 방식의 차이

2. 화살표 함수 방식과 함수 선언 방식은 똑같다고 할 수 있을까?

3. 모듈 내보내기 export, import

   • 알짜배기 상식 - 컴포넌트 이름에서 에러가 나는 경우

[3] Components

what is component in react?

Components are the building blocks of any React app.

컴포넌트란 리액트 앱을 이루고 있는 기본 단위입니다. 컴포넌트들이 유기적으로 연결되어 리액트 앱을 구성하고 있다고 생각할 수 있겠습니다.

컴포넌트를 선언하는 방식

1. 함수형 컴포넌트
2. 클래스형 컴포넌트

컴포넌트를 구성하는 방식에는 2가지(함수형, 클래스형)가 있습니다.

🧐(여기서 잠깐!) 어떤 방식을 써야 할까?

리액트 공식 메뉴얼에서는 함수형 컴포넌트 + Hooks 조합을 권장하고 있답니다.

벨로퍼트님의 모던 리액트에서는 ‘클래스형 컴포넌트는 이제는 잘 사용하진 않지만, 옛날 프로젝트를 유지보수를 하게 되는 일이 있을 수 있으니 알아는 둡시다!’ 정도로 기술이 되어 있네요. 클래스형 컴포넌트를 알아둬야 하는 이유가 되겠죠?! 이를 참고하시고 가볍게 읽어주세요~!

함수형 컴포넌트

함수를 기반으로 하는 컴포넌트 입니다. 속성을 상속받아 사용하는 클래스형 컴포넌트보다 간편하게 작성할 수 있답니다.

import React from "react";
import "./Ch-3.css";

function Introduce({name, workAt}) {
	return (
		<div>
        안녕하세요. {name}입니다. 현재 {workAt}에서 일하고 있습니다.
   </div>
);
}
export default Introduce;

클래스형 컴포넌트

클래스형 컴포넌트에서는 render() 메서드가 꼭! 있어야 합니다. 그 안에 렌더링 해줄 JSX를 반환(return)해야 합니다.

import React, { Component } from 'react';

class Introduce extends Component {
  render() {
    //const { name, workAt, color } = this.props;
		const name = 'Harry';
		const workAt = 'Disney plus service center';

    return (
      <div>
        안녕하세요. {name}입니다. 현재 {workAt}에서 일하고 있습니다.
      </div>
    );
  }
}

Introduce.defaultProps = {
  name: '이름이 설정되지 않았습니다'
};

export default Introduce;

extends : 부모의 속성을 연장해서 사용한다!라는 뜻입니다.즉, Component로 상속을 받아온다 정도로 해석하시면 되겠습니다.

함수형 컴포넌트와 클래스 컴포넌트의 차이

• 함수형과 클래스형 컴포넌트의 성능은 비슷 합니다.
• 클래스형 컴포넌트는 함수형과 다르게 state기능 및 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있습니다.

하지만! 리액트 v16.8버전이 업데이트 되면서 Hooks라는 기능이 도입이 되어 함수형 컴포넌트에서도 클래스형의 state기능, 라이프사이클 기능을 조금 다른 방식으로 사용할 수 있게 되었답니다.

🧐(여기서 잠깐!) class문법의 배경

원래 자바스크립트에는 클래스를 사용하지 못했던 것 알고 계신가요?

ES6 이전에는 class 개념 자체는 있었지만 class를 문법을 사용하지 않고 그 대신 prototype 문법을 사용했다고 해요.

ES6 이전에는 함수를 선언하고 그 함수의 프로토타입에 선언을 하는 방식으로 진행했었답니다.

function Beverage(brand) {
	this.brand = brand;
}
Beverage.prototype.color = function(){
	console.log(this.brand + ' : black');

var beverage = new Beverage('coca cola');
beverage.color(); //coca cola : black

짜잔, 이젠 ES6 이후 class 문법이 도입된 방식이에요!

class Beverage {
	constructor(brand){
		this.brand= brand;
	}
	color() {
		console.log(this.brand + ':black');
	}
	withFood() {
		console.log(this.brand + ': this is good with pizza');
}

const beverage = new Beverage('pepsi zero');
beverage.color(); // pepsi zero :black
beverage.withFood(); // pepsi zero: this is good with pizza

[3.2.1] MyComponent.js

🧐(여기서 잠깐!) 화살표 함수 방식과 함수 선언 방식은 똑같을까?

빠른 답변 : NOPE!

일반 함수의 this : 자신이 종속된 객체
화살표 함수의 this : 자신의 종속된 인스턴스

👉예시로 알아봅시다

function MilkTea() {
  this.name = '그린티';
  return {
    name: '밀크티',
    color: function() { //자신이 속한 객체
      console.log(this.name + '색깔은 brown');
    }
  }
}
 
function GreenTea() {
  this.name = '그린티';
  return {
    name: '밀크티',
    cokor: () => { //자신이 속한 인스턴스
      console.log(this.name + ': 색깔은 green');
    }
  }
}

const milktea= new MilkTea();
milktea.color(); // 밀크티 색깔은 brown
 
const greentea= new GreenTea();
greentea.color(); // 그린티 색깔은 green

🕵🏻‍♂️알아두면 쓸 데 있는 막간 유용팁

React Code Snippet을 vsCode 익스텐션에서 설치해보세요!
rsc입력하고 enter(혹은 tab)하면! 컴포넌트 코드가 생성됩니다😊
rsc → 함수형 컴포넌트
rcc → 클래스형 컴포넌트

[3.2 -3] 모듈 내보내기 export, 모듈 불러오기 import

import React from "react";

const Component = () => {
  return (
    <div>
      <div>나의 쿨한 컴포넌트</div>;
    </div>
  );
};

export default Component;

1) export

여기서 export 구문을 살펴보도록 하겠습니다.

export default Component;

이 코드는 Component()함수를 다른 파일에서도 사용할 수 있도록 허락하겠다! 라는 의미입니다. 다른 파일에서 위의 파일을 import하면 component클래스를 사용할 수 있게 되는 것이죠.

2) import

import Component from "./Component";
const App = () => {
  return (
    <div>
      <Component />
    </div>
  );
};

🕵🏻‍♂️알아두면 쓸 데 있는 막간 알짜배기 상식

아래 코드는 error가 납니다.

error : is defined but never used

//에러 코드
import component from "./Component";
const component = () => {
  return (
    <div>
      <div>나의 쿨한 컴포넌트</div>;
    </div>
  );
};
export default component;

컴포넌트 이름은 대문자로 시작하는 것이 규칙!

컴포넌트 네임의 첫 글자를 소문자 → 대문자로 고치면 바로 작동이 된답니다.

//올바른 코드
import Component from "./Component";
const Component = () => {
  return (
    <div>
      <div>나의 쿨한 컴포넌트</div>;
    </div>
  );
};
export default Component;