React의 컴포넌트 :: 함수형 컴포넌트 & 클래스형 컴포넌트 (+화살표함수)

velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

클래스형과 함수형 차이

---

클래스형 컴포넌트

//클래스형 컴포넌트

import React, { Component } from 'react';

class Hello extends React.Component {
  render() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
}

export default Hello;

 

• state기능 및 라이프사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.
• render()함수가 꼭 있어야 하며, 그 안에 JSX를 return해야 한다.

---

함수형 컴포넌트

BUT! 새로 만들 컴포넌트가 라이프사이클API도 사용하지 않고, state도 사용하지 않고, 그냥 props만 전달해주면 뷰를 렌더링해주는 역할이라면?

함수형 컴포넌트 형식으로 컴포넌트를 정의하는 것도 좋다!

import React from 'react';

function Hello(props) {
    return (
        <div>Hello {props.name}</div>
    );
}

export default Hello;

장점

• 클래스형보다 선언하기 편하며, 메모리 자원도 클래스형보다 덜 사용한다.
• 프로젝트를 완성하여 빌드한 후 배포할 때도 결과물의 크기가 더 작다.

단점

• state와 라이프사이클 API의 사용이 불가능하다. =>  Hooks기능이 도입되면서 해결

* 리액트 공식 메뉴얼에서는 컴포넌트를 작성할 때 함수형컴포넌트 + Hooks를 사용하도록 권장하고 있다!

 

---

화살표함수

ES6문법에서 함수를 표현하는 새로운 방식이지만 function을 이용한 함수 선언 방식과는 사용 용도가 조금 달라 완전히 대체하지는 않는다.

이 문법은 주로 함수를 파라미터로 전달할 때 유용하다.

function 함수명(파라미터) {
            ...
}

↓

const 함수명 = (파라미터) => {
            ...
}

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(); //흰둥이:멍멍!

화살표함수가 기존 function()을 대체할 수 없는 것은 용도가 다르기 때문이라고 했는데, 무엇보다 서로 가리키고 있는 this값이 다르다.

일반 함수는 자신이 종속된 객체를 this로 가리키며 결과가 검둥이로 출력되고,

화살표 함수는 자신이 종속된 인스턴스를 가리키며 결과가 흰둥이로 출력된다.

화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.

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

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

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

 

---

함수형 컴포넌트를 선언한 모습

import React from 'react';

function Hello(props) {
    return (
        <div>Hello {props.name}</div>
    );
}

export default Hello;

 

화살표함수를 사용한 모습

import React from 'react';

const Hello = (props) => {
    return (
        <div>Hello {props.name}</div>
    );
}

export default Hello;

 

비구조화할당을 사용한 모습

import React from 'react';

const Hello = ({name}) => {
    return (
        <div>Hello {name}</div>
    );
}

export default Hello;

 

 

 

참고 velopert.com/2994