3월 기술면접대비 - React 클래스형과 함수형의 차이

 

1. 선언 방식

class

먼저 클래스의 경우에는 React에서 제공하는 Component라는 클래스를 import해와서 만들 수 있습니다.

 

import { Component } from 'react';

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

 

 

function

함수형의 경우에는 이름의 첫 글자가 대문자로 시작하는 JavaScript 함수 형태로 선언된 컴포넌트입니다.

export default function Greeting() {
  return (
    <h1>Hello, world!</h1>;
    )

}

 

 

 

2. state 차이

class

클래스 컴포넌트에서는 constructor 안에서 직접 state object를 만들고 this를 이용해 접근이 가능합니다.

 

function

함수형 컴포넌트에서는 useState를 이용하여 state를 관리합니다.

 

 

 

 

3. props 차이

class

클래스형에서는 this.props를 호출하여 props에 접근할 수 있습니다.

 

function

함수형에서는 props로 전달받아 점 표기법( . )으로 props에 접근하거나 {}를 이용하여 값을 바로 전달받을 수도 있습니다.

 

 

 

4. LifeCycle 차이

class

클래스형의 라이프사이클의 경우 componentDidMount()는 컴포넌트가 마운트된 직후, componentDidUpdate()는 리렌더링이 일어난 직후, componentWillInmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다.

 

https://puringles.tistory.com/752 를 참고하면 좋습니다.

 

 

function

함수형에서는 useEffect를 이용하여 생명주기 메서드를 사용할 수 있습니다.

 

 

 

5. 이벤트 핸들링

class

클래스형에서의 이벤트 핸들링은 함수 선언시 화살표로 바로 선언이 가능하며, 요소에 적용하기 위해서는 this를 붙여줘야 합니다.

 

function

함수형에서는 const + 함수 형태로 선언해주어야 합니다.

요소에 적용 시에는 this필요 없이 함수명을 적어주면 됩니다.

 

 

저는 프로젝트를 만들 때 함수형 컴포넌트를 사용하여 만듭니다.

React 16버전에서 hooks의 도입 이후부터는 함수형 컴포넌트에서도 상태관리가 가능해졌습니다.

 

함수형 컴포넌트의 사용 이유 

 

1. 리액트에서도공식적으로 권장 !

역시 공식문서를 따르는 게 좋을 것 같습니다.

 

2. 재사용성과 가독성

함수형 컴포넌트는 기본적으로 JS의 함수형태이므로 import 와 export가 쉽고 함수형태라 다른 컴포넌트 로직에 더욱 쉽게 조합할 수도 있습니다.

또한 단순한 구조를 갖추고 있고 클래스형 컴포넌트에서는 라이프사이클 관리를 위해 메서드를 사용해야 하며 render()와 this의 사용이 필수적인데 이 부분이 가독성 측면에서 매우 불리하다고 생각합니다.

 

 

 

 

 

 

 

 

reference.

React.LEARN REACT>Your First component>Defining a component.https://react.dev/learn/your-first-component#defining-a-component

[React] - Class 컴포넌트 vs Function 컴포넌트.cychann.log.(22.02).https://velog.io/@cychann/React-Class-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-vs-Function-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8#3-props

클래스형과 함수형 차이.sdc337dc.log.(20.07).https://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#2-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%B0%A8%EC%9D%B4