클래스 컴포넌트와 함수형 컴포넌트는 뭐가 다를까?

안녕하세요, 최근에 프론트엔드 신입, 주니어 개발자를 뽑는 공고에 서류 합격을 하여서 서울에 면접을 보고 왔습니다! 기술 면접을 1시간, 컬처핏 면접을 30분 정도 총 1시간 30분 정도를 봤습니다. 근데 기술 면접 중에서 갑자기 훅 들어온 질문이 있었습니다. 그건 바로 "리액트에서의 클래스, 함수형 컴포넌트는 장단점이 각각 무엇이고 어떤 차이가 있는데 구체적으로 설명을 해줄 수 있나요?"라고 질문을 하였다. ES6 이후에 class 형식이 들어오고 확장을 하는 법이나, 작성법에 대해서는 알고 있었지만, 최근 들어서 많은 개발자들이 일반 함수나 컴포넌트를 지향한다. 라고 알고 있었지 왜 그런지는 몰랐다. 그래서 정확히 어떤 차이가 있는지 알아보기 위해서 이번 블로그를 작성을 한다.

 

클래스형 컴포넌트

클래스형 컴포넌트는 ES6의 클래스 문법을 이용해서 작성을 합니다. 

1. extend라는 키워드를 사용하여 React.Component 클래스를 상속을 받는다.
2. render() 메소드를 이용하여 UI를 정의를 한다.

 

🔥 다음 아래는 클래스형 컴포넌트 예시입니다.

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'taerang';
    return <div className="react">{name}<div>
  }
}

export default App;

 

 

여기서 중요한 클래스 컴포넌트의 핵심

• class 키워드가 필요하다.
• Component로 상속을 받는다.
• render() 메소드가 반드시 있어야 한다.

 

함수형 컴포넌트

🔥 다음 아래는 함수형 컴포넌트 예시입니다.

import React from 'react';
import './App.css';

function App() {
  const name = 'taerang';
  return <div className = "react">{name}<div>
}

export default App;

 

우리가 많이 사용하고, 접하고 있는 그러한 방식이다. 클래스형 컴포넌트와 비교하면 비교적 더 짧고 간결하다. 또 함수 자체가 렌더 함수이기 때문에 클래스형 컴포넌트인 redner 메서드를 사용하지 않아도 된다. 또 Component를 상속받지 않아도 된다는 특징을 지니고 있다.

 

그럼 어떠한 점이 다를까?

어떤 기능적인 측면으로는 다양한 면이 있다. 예를 들면 state, props, event handling, LifeCycle .. 등등 

state

state : 컴포넌트 내부에서 활동하고, 사용할 수 있으며, 바뀔 수 있는 값

 

state 클래스형 같은 경우에는 constructor 안에서 this.state로 초기 값을 설정할 수 있다.

constructor(props) {
    super(props); //React.Component의 생성자 호출
    
    this.state = {
    	Id : [],
        password: "", 
    };
 }

 

constructor 없이 바로 state 초기화 하는 방법 

Class A extends B {
    state = {
    	Id : [],
        password: "", 
    };
    
    ...
 }

 

this.setState를 이용해서 state의 값을 바꿀 수도 있습니다.

this.state = {Id : [], password : "", };

 

state 함수형 같은 경우에는 기존에 class 방식과 다르다.

• useState를 이용하여 state를 관리한다.
• useState를 호출하면 배열이 반환이 되는데 첫 번째 원소는 현재 상태, 두 번째는 상태를 바꿔주는 함수

const [count, setCount] = useState<number>(0);

 

props

props : 컴포넌트의 속성을 설정할 때 사용하는 요소 (수정 ❌)

 

모든 React 컴포넌트는 자신의 props를 다룰 때 순수 함수처럼 동작을 하고, 수정은 state만.

//클래스형 컴포넌트
class A extends B {
	render() {
    	const {name, age} = this.props;
        return(
        	<div>안녕하세요, 저는 {age}살 {name}입니다.<div>
        )
    }
}

//함수형 컴포넌트
const A = ({ name, age} : { name : string, age : number }) = {
	return(
        <div>안녕하세요, 저는 {age}살 {name}입니다.<div>
     )
}

함수형 컴포넌트는 렌더 함수의 parameter로 props를 전달받아서 사용을 한다. 

따로 불러서 사용할 필요 없이 바로 호출이 가능하기 때문에 class보다 더 간결하고 편리하다.

 

Life Cycle

다음 내용은 Life Cycle인데, 복잡하게 다룰 내용은 아니고 간단한 개념만 이야기해보겠습니다.

 

리액트에서의 컴포넌트는 Life Cycle을 가지고 있습니다. 컴포넌트는 총 3가지의 단계로 이뤄져 있습니다.

생성 - 업데이트 - 제거의 생명주기를 가지고 있습니다. 이러한 생명주기에 어떤 작업을 처리해야 하는지 지정을 해야  불필요한 업데이트를 방지할 수 있다고 합니다. 하지만 이러한 클래스 컴포넌트는 Life Cycle API를 사용하며, 함수형 컴포넌트는 Hook을 사용하다고 합니다.

 

클래스 컴포넌트의 Life Cycle API는 다른 포스팅에서 알아보도록!

 

더 자세한 내용은 과거 발행한 포스팅 참고하기 🔻

저 React는 생명이 있어요 .. 🌱 <React Life Cycle>

 

event handling

 

다음 내용은 이벤트 핸들링에 관한 내용입니다.

 

클래스형 컴포넌트는 함수 선언을 하고 바로 선언이 가능하고 적용을 하기 위해서는 this를 사용합니다

//클래스형 컴포넌트
handleClick = e -> { ... }

render(){
    return(
       <input type="button" onClick={this.handleClick}>클릭하세요.<input>
    )
};

//함수형 컴포넌트
const handleClick = () => { ... }
	return(
	   <input type="button" onClick={handleClick}>클릭하세요.<input>
    )
};

.

함수형 컴포넌트는 const 형태로 선언을 하고 this가 필요 없이 사용할 수 있습니다.

 

뭐 이런저런 이유들도 class가 조금 많이 복잡하긴 하네요.

하지만 class를 지향하는 기업들도 분명히 존재할 것 같습니다.  예를 들면 Life Cycle의 메서드, this 키워드 등등..

 

다음 포스팅에서는 그런 내용들을 한 번 담아보겠습니다 ~

 

느낀 점

사실 이번 계기를 통해서 클래스와 함수형의 컴포넌트에 대해서 알 수 있어서 좋았다.

지금 다시 생각하면 원래 다 알고 있던 내용인데, 면접 때 긴장을 해서 안 나왔을 수도..? 앞으로 더 많은 기업의 면접을 보면서 더 다양한 기술 면접을 준비할 계기가 되어야겠다.