class형과 functional형의 차이

클래스형과 함수형의 차이

함수를 선언할 때, 리액트에서는 class로 시작하는 함수가 있는가 하면, 반대로 function 부터 시작하는 함수들이 있다. class형은 옛날에 주로 사용했던 함수선언 형태였는데, 이 차이를 왜 알아야 할까???
우리는 코드를 작성하는 것과 함께 읽는 것도 중요하다. 옛날의 코드가 class형으로 되어 있다면 반드시 읽을줄 알아야 리팩토링이 가능하다. 지금 그 차이를 알아보고자 한다!

일단 기본 생김새를 살펴보자!

클래스형 컴포넌트

import React, {Component} from 'react';

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

함수형 컴포넌트

import React from 'react';

function sayHello () {
	return <h1> Hello ! </h1>;
}

기본 생김새만 봤을 때, 일단 함수형 컴포넌트가 훨씬 가독성이 좋고 친숙하다! 각자의 장단점이 있으니, 특징의 차이를 비교하며 알아보자!

클래스형과 함수형 컴포넌트의 차이! with 특징!

1. JSX의 렌더링 방식
위의 기본 생김새를 봤을 때, 클래스형은 반드시 reder()가 필요하고 함수형은 return이 필요하다. 이는 JSX를 반환하기 위해서이다.

2. props 전달 방식

클래스형 컴포넌트

import React, {Component} from 'react';

class sayHello extends React.Component {
  render() {
    const {name} = this.props;
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트

import React from 'react';

const name = "king";

function sayHello ({name}) {
	return <h1> Hello ! {name}</h1>;
}

props를 전달 받기 위해 클래스형 컴포넌트는 this를 사용한다. 하지만 함수형은 함수의 인자로 더욱 간단하게 props를 받을 수 있다!

3. 상태값 관리

클래스형 컴포넌트

class Hello extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      clap : 0
    };
  }
  
  render(){
    return(
       <div>
	 	<button onClick={() => this.setState({ clap: this.state.clap + 1 })}>
         Hifive
      	</button>
      </div>
    );
  }
}

생성자인 construnctor 안에서 super(props)를 호출해야 한다. 그렇지 않으면 모든 상태 값은 undefiend가 된다. 먼저 생성자를 선언하고 key, value의 객체를 생성해야한다. 그리고 이를 render에서 setState하여 상태값을 관리한다.
코드가 길고 복잡해보이지만 별도의 hook 없이 그대로 상태값을 관리할 수 있다.

함수형 컴포넌트

import useState from 'react'

const hello = () => {
  const [clap , setClap] = useState(0);
  
  return (
    <div>
	<button onClick = {() => setClap(clap+1)}>Hifive</button>
    </div>
  );
};

함수형은 훨씬 간단하며 기본적으로 상태값 관리가 자체적으로 어렵다. 하지만 useState라는 리액트 기본 내장훅을 사용하여 상태값관리를 할 수 있다.

4. lifecycle

클래스형 컴포넌트

class Class extends React.Component {
 componentDidMount() {
   console.log("Hello");
 }

 render() {
   return <h1>Hi its rainy day!</h1>;
 }
}

componentDidMount는 렌더링이 되고 난 직후에 호출된다. reder에 의해서 jsx가 반환되고 렌더링이 완료되면 콘솔창에 Hello가 찍힐 것이다.

함수형 컴포넌트

import useEffect from 'react'

const FunctionF = () => {
 	useEffect(() => {
   return () => {
     console.log("king");
   };
 }, []);
 return <h1>aloha!</h1>;
};

함수형은 다시 useEffect라는 기본 내장 훅을 사용하여야 한다. 사용한 곳의 빈 배열은 렌더링이 되고난 직후 단 한 번만 useEffect안의 함수를 호출한다는 것을 의미한다. 만약 어떠한 상태값이 변하거나 통신을 했을 때 실행하고 싶다면 빈배열 대신, 상태값을 써주면 된다!

클래스형과 함수형 컴포넌트의 차이점은?
1. 클래스형은 반드시 Component로 상속 받아야 한다.
2. JSX를 반환하는 방식이 다르다. (클래스는 render / 함수는 return)
3. props의 전달 방식이 다르다. (클래스는 this를 통해서 받는다 / 함수형은 인자로 전달한다)
4. 상태 관리가 다르다. (클래스는 자체적으로 상태 관리가 가능하다 / 함수형은 내장 훅을 사용해야 한다)
5. 생명주기가 다르다. (class는 componentDidMount를 쓰지만 / 함수형은 내장 훅을 사용하면 된다)