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

김채운·2022년 10월 5일

목록 보기

8/26

React에서 컴포넌트를 선언하는 방식에는 두 가지 방법이 있다.
하나는 클래스형 컴포넌트이고, 또 다른 하나는 함수형 컴포넌트이다. 과거에는 클래스형 컴포넌트를 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
그래도 과거에 사용했던 클래스 컴포넌트로 개발한 이력이 남아있는 서비스의 유지보수를 해야하는 상황이 있을 수 있기 때문에 두가지 방식을 다 알아놓을 필요가 있다.

➡️선언방식

클래스형 컴포넌트

import React, {Component} from 'react'

class App extends Component {
    render() {
        const name = 'class'
        return <div>{name}</div>
    }
}

export default App

class 키워드가 필요하다.
Component로 상속을 받아야 한다.
render() 메소드가 반드시 필요하다.
state,lifeCycle 관련 기능 사용이 가능하다.
함수형보다 메모리 자원을 더 많이 사용한다.
임의 메소드를 정의할 수 있다.

함수형 컴포넌트

import React from 'react'

const App = () => {
    const name = 'function'
    return <div>{name}</div>
}

export default App

state,lifeCycle 관련 기능 사용이 불가하지만, Hook을 통해서 해결 가능하다.
클래스형보다 메모리 자원을 덜 사용한다.
컴포넌트 선언이 편하다.

➡️state 사용

state란 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.

클래스형 컴포넌트

import React, {Component} from 'react'

class App extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            number: 1
        };
        or
        state = {
            number: 1
        }
    }
    plusNumFunction = () => {
        this.setState({ number: number + 1 })
    }
    retnder() {
        <p>Number : {this.state.number}</p>
    }
}

export default App

constructor 안에서 this.state로 초기 값 설정이 가능하다.
constructor 없이 바로 state 초기 값을 설정할 수도 있다.
this.setState() 를 통해서 state의 값 변경이 가능하다.
클래스형 컴포넌트의 state는 객체형식이다.

함수형 컴포넌트

import React, {useState} from 'react'

const App = () => {
    const [num,SetNum] = useState(0)
    
    const plusNum = () => {
        setNum(num+1)
    }
    <button onClick={plusNum}>+</button>
    return <div>{num}</div>
}

export default App

useState 함수로 state 사용이 가능하다.
useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재상태, 두 번째 원소는 상태를 바꿔주는 함수이다.

➡️props 사용

✔️ 컴포넌트의 속성을 설정 할 때 사용하는 요소이다.
✔️ 읽기전용!
✔️ 컴포넌트 자체 props를 수정해서는 안 된다.
✔️ 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.
✔️ 수정 되는 것은 state여야 한다.

클래스형 컴포넌트

import React, {Component} from 'react'

class App extends Component {
    render() {
        const {name,age} =this.props
        return 
        <div>
        안녕하세요 제 이름은 {name} 입니다.
        나이는 {age} 입니다.
        </div>
    }
}

this.props를 통해 값을 불러 올 수 있다.

함수형 컴포넌트

import React from 'react'

const App = (props) => {

    return 
    <div>
        안녕하세요 제 이름은 {props.name} 입니다.
        나이는 {props.age} 입니다.
    </div>
}

export default App
or
import React from 'react'

const App = ({name,age}) => {

    return 
    <div>
        안녕하세요 제 이름은 {name} 입니다.
        나이는 {age} 입니다.
    </div>
}

export default App

➡️이벤트 핸들링

클래스형 컴포넌트

import React, {Component} from 'react'

class App extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            number: 1
        };
    plusNumFunction = () => {
        this.setState({ number: number + 1 })
    }
    retnder() {
        <div>
           <button onClick={this.plusNumFunction}>버튼</button>
        </div>
    }
}

export default App

함수 선언시 화살표 함수로 바로 선언이 가능하다.
요소에 적용할 때 this를 붙여줘야한다.

함수형 컴포넌트

import React, {useState} from 'react'

const App = () => {
    const [num,SetNum] = useState(0)
    
    const plusNum = () => {
        setNum(num+1)
    }
    <button onClick={plusNum}>+</button>
    return <div>{num}</div>
}

export default App

const + 함수의 형태로 선언해야 한다.
요소에 적용할 때 this가 필요없다.

클래스형 컴포넌트는 다른 말로 stateful 컴포넌트, 함수형 컴포넌트는 stateless 컴포넌트라고 하기도 한다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 stateful로 불리는 것이며 상대적으로 복잡한 UI로직을 가지고 있다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려주기 때문에 stateless라고 불리는 것이다. 리액트 훅이 등장하면서 함수형 컴포넌트를 더 많이 사용하는 추세가 되었지만 오래된 리액트 코드의 경우 클래스형 컴포넌트로 이루어진 경우가 더 많으므로 두 가지 모두 다 잘 알고있어야 리액트로 개발을 할 때 어려움을 겪지 않을 것이라고 생각한다.

참조 👇