Class형 컴포넌트와 함수형 컴포넌트

React.js 에서 컴포넌트를 구성하는 방법을 이야기해보라고 하면 2가지 

Class형 컴포넌트와 함수형 컴포넌트를 이야기 할 수 있다.

 

우선 Class형 컴포넌트부터 살펴보자 

 

<ClassComponent.js>

 

import React, { Component } from "react";



class ClassComponent extends Component {

  render() {

    return (

      <div>

        <h1>클래스형 컴포넌트</h1>

      </div>

    );

  }

}



export default ClassComponent;

 

클래스를 선언후 extends로 Component 클래스를 상속받아 사용한다. 

 

Class형 컴포넌트의 특징을 살펴보면 

 

1. state 및 LifeCycle 사용이 가능하다 

2. 임의의 Method를 정의 할 수 있다. 

3. render 함수로 jsx를 반환한다. 

 

이렇게 볼 수 있다. 

 

Class형 컴포넌트의 가장 큰 특징이라고 생각하는 state 및 LifeCycle에 대해 살펴보면 

 

컴포넌트에서 state에 접근을 하기 위해선 아래의 생성자를 작성한 후 접근해주게 된다.

constructor(props) {

    super(props);

    this.state = {};

  }

 

위의 생성자를 적는 이유는 크게 2가지로 볼 수 있는데 

 

1. super를 선언하지 않은 상태에서 this를 사용하게 되면 코드내에서의 this의 의미를 이해하기가 굉장히 어려워진다.

2. super(props)를 통해 props인자를 초기화 

 

먼저 첫번째 이유부터 생각을 해보면 사실 그렇게 써야하는 이유를 찾지 못할 수 있다 나 조차도

 

'어? 그냥 this때문에 사용하는건 너무 비효율적이지않나?' 라고 생각을 했었으니 말이다. 

 

하지만 내가 생각하는 가장 중요한 이유는 두번째 이유에 있다고 생각한다. 

 

한번 생각을 해보자 super(props)를 통해 props인자를 초기화를 시키는데 이를 진행하지 않고 this.props를 실행하게 될경우 무슨일이 벌어질까? 이 경우 this.props는 undefined를 호출하게 된다. 이런 경우엔 페이지 자체가 렌더링이 되지않기도하고 undefined가 발생할 경우를 대비해 따로 method를 정의해놓는것도 비효율적이다.  

 

이런 사태를 방지하기 위해서 props인자를 초기화 시키고 this.props를 사용해야한다고 생각해서 위의 생성자 함수를 호출해주고 사용하도록 하는게 좋다. 

 

LifeCycle의 경우 ComponentDidmount, ShouldComponentUpdate등 여러 method를 정의 할 수 있는데 이건 나중에 따로 정리해 보는걸로...

 

<FuntionComponent.js>

import React from "react";



function FunctionComponent() {

  

  return (

    <div>

        Funtion 컴포넌트

    </div>

  )

}



export default FunctionComponent;

 

위와 같은형태가 함수형 컴포넌트의 기본형인데 함수형 컴포넌트를 사용하는 이유는 크게 두가지라고 생각한다.

 

1. class형 보다 선언하기 쉬움

2. 메모리 자원을 덜 사용함 

 

예전에 Hooks가 없을 당시에는 lifecycle이나 state를 사용할 수 없었는데 Hooks가 생김으로써 함수형 컴포넌트를 많이 사용하는 추세이다. 

 

그리고  Es6가 생김에 따라 함수형에도 변화가 생겼는데 바로 Arrow Function 즉 화살표 함수이다.

화살표 함수자체는 나중에 알아보기로 하고 컴포넌트 생성에서 알아보자면 

 

위의 컴포넌트를 다음과 같이 바꿀수있다. 

 

import React from "react";



const FunctionComponent = () => {

  return (

    <div>

      화살표 함수

    </div>

  )

}



export default FunctionComponent;

화살표 함수를 사용하는것이 좀 더 간결하게 나타낼 수 있으므로 나의 경우에는 함수형컴포넌트를 사용할 경우 화살표 함수를 사용하는 편이다.

 

컴포넌트 형성은 그때그때 상황에 알맞게! 사용을 해주면서 코딩을 하면 된다.