클래스형 컴포넌트

컴포넌트 : 함수형, 클래스형 컴포넌트  2가지 존재

 

클래스형 컴포넌트

클래스형 컴포넌트와 함수형 컴포넌트의 역할은 같다.

클래스형 컴포넌트의 경후 state 기능 및 라이프 사이클 기능과  임의 메서드를 정의 할 수 있다.

반드시 render 함수가 필요하며, 그안에서 보여주어야 할 JSX를 반환 해주어야 한다.

 

함수형 컴포넌트

장점

• 클래스형 컴포넌트보다 선언하기 편하다.
• 메모리 자원을 클래스형 컴포넌트에 비해 덜 사용한다.
• 프로젝트 완성하여 빌드 후 배포시에도 함수형컴포넌트를 사용하는 것이 파일 크기가 더 작다.
  (함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면서에 사실상 별 차이가 없다.)

단점

• state와 라이프 사이클 API의 사용이 불가능 하다.
  (v16.8 이후 Hooks를 통해 조금 다른 방식으로 비슷한 작업을 할 수 있다.)

※리액트 공식 메뉴얼은 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하는 것을 권장한다.

 

 

※ ES6 클래스

class Dog {
	constructor(name) {
    	this.name = name;
    }
    say() {
    	console.log(this.name + ': 멍멍');
    }
}

const dog = new Dog('흰둥이');
dog.say(); //흰둥이: 멍멍

 

※ ES6 화살표 함수

function을 이용함 함수 선언 방식을 아예 대체하는 것은 아니며, 사용 용도가 다르다.
주로 함수를 파라미터로 전달할 때 유용하다.

setTimeOut(function() {
	console.log('hello world');
}, 1000);

setTimeOut(() => {
	console.log('hello world');
}, 1000);

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

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

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


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

일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.

function twice(value) {
	return value * 2;
}

const triple = (value) => value * 3;

따로 { }를 열어주지 않으면 연산한 값을 그대로 반환한다는 의미