리액트에서 컴포넌트를 사용할때 기존에는 클래스 기반이었지만, 이제는 함수 기반을 사용한다. 이 글에서는 이 두가지를 비교하고 알아보고자 한다.

컴포넌트 코드 형태

함수 기반

function CustomComponent() {
    return (
        <div className="app">
            <h1>Hello World</h1>
        </div>  
    );
}

export default CustomComponent;

함수 기반에서는 아주 간단하게, jsx 를 반환하는 함수를 만들어 줘서, 해당 함수를 호출 할 경우 리턴 안에 있는 내용을 반환해준다. 함수를 호출 할때 CustomComponent() 안에 CustomComponent(props) 처럼 값을 넣어줘서 사용 할 수도 있다.

클래스 기반

class CustomComponent extends Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

export default CustomComponent;

클래스 기반에서는 기존에 있던 Component라는 클래스를 확장 시킨 클래스를 만들어 주고, 이 클래스의 render() 함수가 jsx 를 반환해준다.

컴포넌트 사용

위와 같이 두가지 방법으로 컴포넌트를 만들어 줄 경우, 사용하는 방법은 동일하다. 그냥 다른 js 파일에서 해당 컴포넌트를 호출해주면 된다.

...
import CustomComponent from './CustomComponent'

ReactDOM.render(
    <React.StrictMode>
        <CustomComponent />
    </React.StrictMode>,
    documnet.getElementById("root")
);

클래스 기반을 사용한 이유?

코드만 봐도 함수 기반이 훨씬더 간단해 보이는데, 왜 굳이 클래스 기반을 사용했나 싶었는데, 기존에는 함수 기반의 컴포넌트들로는 State 와 Props를 제대로 사용할 수 없었기 때문이다. 이제는 React 에서 Hook 을 사용해서 함수 기반 컴포넌트들도 State을 가질 수 있게 되었다.

State 과 Props 의 사용

이제 두가지 컴포넌트들이 Props와 State을 어떻게 사용하는지 확인해보자

함수 기반

import { useState } from react;

function CustomComponent(props) {
    const [name, setName] = useState("");
    const [age, setAge] = useState(20);

    return (
        <div className="app">
            <p>Hi, my name is {name} and I'm {age} years old</p>
            <p>I live in {props.address}</p>
        </div>  
    );
}

export default CustomComponent;

함수 기반을 사용할 경우, react 의 useState을 사용해서 state 들을 생성하고, 같이 생성된 set 함수들로 값들의 변경도 용이하다. props는 함수의 변수로 받아오기 때문에 함수 내에서 바로 사용할 수 있다.

props의 형태를 미리 알고 있다면 CustomComponent ({ address, … props }) 와 같은 형태로 미리 destructuring을 해서 코드 상에서는 바로 { address } 로 사용할 수도 있다.

클래스 기반