React 클래스형, 함수형 컴포넌트 차이

React Component

React의 Component 선언 방식은 두 가지로 나뉜다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트이다. 현재 많은 사람들이 함수형 컴포넌트로 개발을 진행하지만 기존에 클래스형 컴포넌트를 개발중이던 곳도 많을 수 있기 때문에 그 프로젝트의 유지보수를 위해서라도 클래스형 컴포넌트에 대한 개념을 알고 있으면 많은 도움이 될 것이다.

 

Class Component VS Functional Component

일반적인 차이점

클래스형 컴포넌트

state와 LifeCycle API의 사용이 가능하다.

임의 메서드를 정의할 수 있다.

함수형 컴포넌트

state와 LifeCycle API의 사용이 가능하다. (16.8 버전이후 제공되는 Hook으로 해결 가능)

클래스형 컴포넌트보다 선언하기 훨씬 편하다.

메모리 자원을 클래스형 컴포넌트보다 덜 사용한다.

빌드한 결과물의 크기 역시 클래스형 컴포넌트보다 작다.

 

선언방식의 차이점

클래스형 컴포넌트와 함수형 컴포넌트는 선언 방식 다르다.

클래스형 컴포넌트

import React, {Component} from 'react';

class App extends Component {
    render() {
        const text = 'Hi Soopiri'
        return <div className=react'>{text}</div>
    }
}

export default App;

우선 클래스형 컴포넌트는 class 키워드가 필요하며, Component를 상속받아야 한다. 또한 화면에 표시하기 위한 render() 메서드가 반드시 필요하다.

함수형 컴포넌트

import React from 'react';

const App = () => {
    const text = 'Hi Soopiri'
    return <div className='react'>{text}</div>
}

export default App;

클래스형 컴포넌트와 비교해서 훨씬 간결하게 코드를 작성할 수 있다. 함수 자체가 렌더 함수이기 때문에 render() 메서드를 사용하지 않아도 되고, Component를 상속받지 않아도 된다.

 

State 사용 차이

클래스형 컴포넌트

constructor안에서 this.state를 통해 초기 값을 설정 가능하며, constructor 없이도 초기 값을 설정할 수 있다. 또한 아래 코드에서 볼 수 있듯, 클래스형 컴포넌트의 state는 객체 형식이다.

constructor(props){
    super(props);
    
    this.state = {
        name: 'soopiri',
        items: []
    };
}

// without constructor
class App extents Component {
    state = {
        name: 'soopiri',
        items: []
    }
}

this.setState 함수로 state의 값을 변경할 수 있다.

onClick={()=> {
    this.setState({ price: price + 100 });
}}

함수형 컴포넌트

함수형 컴포넌트에서는 useState로 state를 핸들링한다. useState함수를 호출하면 배열이 반환되는데 첫번째 원소는 state 두번째 원소는 setState의 역할을 하는 즉, state를 변경해주는 함수이며, useState의 파라미터는 state의 초기값이다.

const App = () => {
  const [name, setName] = useState('soopiri');
  
  const onButtonClick = {()=> {
      setName('HAHA');
  }}
}

 

Props 사용 차이

props는 컴포넌트의 속성을 설정할 때 사용하는 요소로, 읽기 전용이며 컴포넌트 자체의 props를 수정해서는 안된다.

모든 React 컴포넌트는 자신의 props를 다룰 때 순수 함수처럼 동작해야 하며, 수정되는 것은 state만 수정되어야 한다.

클래스형 컴포넌트

this.props로 불러온다

class App extends Component {
    render () {
        const {name, age} = this.props;
        return (
            <div>
                안녕? 나는 {name}구, {age}살이야.
            </div>
        )
    }
}

함수형 컴포넌트

렌더 함수의 parameter로 props를 전달받아 사용한다.

const App = ({ name, age}) => {
    return(
        <div>
            안녕? 난 {name}이구, {age}살이야.
        </div>
    )
}

 

LifeCycle 차이

모든 리액트 컴포넌트에는 라이프사이클이 있다. 컴포넌트는 생성(mount) > 업데이트(update) > 제거(unmount)의 생명주기를 갖는다. 적절한 생명주기에 어떤 작업을 처리해야 하는지 지정해줘야 불필요한 업데이트를 방지할 수 있다. 클래스형 컴포넌트에서는 LifeCycle API를 사용하며, 함수형 컴포넌트에서는 Hook을 사용한다.

클래스형 컴포넌트

LifeCyle API는, 클래스형 컴포넌트에서 활용되는 것으로 컴포넌트가 DOM 위에 생성되기 전과 후의 데이터가 변경되어, 상태를 업데이트하기 전과 후로 실행되는 메서드 들이다. (자세한 내용은 추후 포스팅에서 다루도록 할 예정)

LifeCycle 출처: https://twitter.com/sstur_/status/567937326669651969

함수형 컴포넌트

리액트 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동(hook into) 할 수 있게 해주는 함수들이다. 클래스형 컴포넌트에서는 동작하지 않으며, class없이 React를 사용할 수 있게 해준다.

 

이벤트 핸들링

클래스형 컴포넌트

함수 선언 시 애로우로 바로 선언이 가능하며, 적용하기 위해선 this를 붙여야 한다.

handleClick = e =>{...}

render() {
    return (
        <>
            <input type='button' onClick={this.handleClick}>버튼</input>
        </>
    )
}

함수형 컴넌트

const 함수 형태로 선언해야 하며, this가 필요없다.

const handleClick = () => {...}

return (
    <>
        <input type='button' onClick={handleClick}>버튼</input>
    </>
)

 

 

마무리

현재는 리액트 공식 매뉴얼에서도 컴포넌트를 새로 작성할 때 함수형 컴포넌트를 사용하도록 권장하고 있다. 특히 리액트 16.8버전부터는 Hook을 지원하여, 함수형 컴포넌트의 단점이던 state와 라이프사이클 API의 사용이 불가능하다는 단점을 보완했다. 하지만 리액트의 state와 생명주기를 이해하기 위한 차원, 그리고 위에서 언급했던 것처럼 유지보수를 진행해야 할 상황이 빈번하게 발생할 수 있다는 점에 있어서 클래스형 컴포넌트의 학습을 등한시해서는 안될 것 같다.

다음에는 생명주기 및 LifeCycle API, Hook에 대해서 자세히 알아보도록 하자

 

 

참고링크

velog.io 클래스형 컴포넌트