[React] # 클래스형 컴포넌트 VS 함수형 컴포넌트

3장에서 클래스형 컴포넌트와 함수형 컴포넌트에 대해 코드를 작성하며 배웠습니다. 선언 방식과 컴포넌트의 차이와 props, state 에 대한 자세한 설명과 관련 코드는 다음 링크를 참고하시길 바랍니다.

https://daradarav.tistory.com/14

[React] 03. 컴포넌트

이번 챕터에서는 지난 포스트에서 다뤘던 컴포넌트에 대해 간단히 정리하겠습니다. 개념을 간단히 되짚어본 뒤, 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 정리해보겠습니다. 컴포넌트 목적에 따라 나누는 경우가 무엇인지에 대해서도 알아보도록 하겠습니다.

---

📌 컴포넌트

📚 컴포넌트

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음
• 특정 부분이 어떻게 생길지 정하는 선언체
• 재사용이 가능한 API, 다양한 기능이 내장되어 있으며 컴포넌트 하나에 생김새와 작동 방식을 정의
• JavaScript 함수와 유사, "props"라고 하는 임의의 입력을 받고 함수에 어떻게 표시하는지를 엘리먼트에 반환함
• 컴포넌트의 이름은 반드시 대문자로 시작됨

---

 

📚 컴포넌트 목적에 따른 분류

📃 프레젠테이셔널 컴포넌트

• View 만을 담당하는 컴포넌트
• 프레젠테이션널 컴포넌트와 컨테이너 컴포넌트 모두 사용 가능
• props로만 데이터나 함수를 가져올 수 있음
• state는 데이터가 아닌 UI에 대한 state여야함
• 함수형 컴포넌트로 작성됨

 

📃 컨테이너 컴포넌트

• 다른 프레젠테이션 컴포넌트나 컴포넌트를 관리
• 내부에 DOM 엘리먼트(UI)를 작성하지 않음
• 스타일을 가지지 않음, 스타일은 반드시 프레젠테이셔널 컴포넌트에 작성될 것

---

📌 함수형 컴포넌트 VS 클래스형 컴포넌트

📚 차이점

리액트 v16.8 업데이트로 Hooks가 도입되었고 함수 컴포넌트도 클래스 컴포넌트와 같이 작업을 할 수 있게 되었습니다. 리액트 공식 매뉴얼에서는 함수 컴포넌트+Hooks를 사용하도록 권장합니다. 그러나 이전의 작성된 코드들의 유지 및 보수를 위하여 클래스 컴포넌트도 반드시 알아두어야합니다.

---

📚 선언 방식

📃 클래스형 컴포넌트

import {Component} from "react";

class App extends Component {
    render() {
        const cType = '클래스형 컴포넌트';
        return <div'> {cType} </div>;
    }
}

export default App;

• 자바나 파이썬 같은 객체 지향 언어의 class 동일
• class 키워드로 선언하고 React.component를 상속하여 export함
• render( ) 메소드가 반드시 필요, 리액트의 생명 주기 중 하나임
• state, lifCycle 관련 기능을 사용할 수 있음
• 임의의 메소드 정의 가능
• 메모리 자원이 상대적으로 많이 소모되고 문법이 복잡함

 

📃 함수형 컴포넌트

function App() {
    const cType = "함수형 컴포넌트";
    return <div> {cType} </div>;
}

export default App;

• 함수(function)을 export한 형태
• state나 lifeCycle 관련 기능은 사용이 불가능
• 클래스 컴포넌트보다 선언하기 편리
• 클래스 컴포넌트보다 메모리 자원을 덜 사용하고, 실제 배포할 때도 결과물의 파일 크기가 더 작습니다.
• 리액트 v16.8 업데이트로 Hook을 통한 state와 라이프사이클 API도 사용이 가능

---

📚 props

📃 props

• props는 properties의 줄임말로 컴포넌트의 속성을 설정
• props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있음
• 컴포넌트 자체에서는 props 값을 수정할 수 없음, 읽기 전용

 

📃 클래스형 컴포넌트

import { Component } from "react";

class NewComponent extends Component {
    render() {
            const cType = "클래스형 컴포넌트";
    		const {write} = this.props;
            return <div> {cType}에서 {write}을 보여줍니다</div>;
    }
}

• render 함수에서 this.props를 조회할 수 있음
• defaultProps와 propTypes는 함수형 컴포넌트와 동일하게 선언, class 내부에서도 지정 가능

 

📃 함수형 컴포넌트

const App = ({write}) => {
    const cType = "함수형 컴포넌트";

    return (
        <div>
             {cType}에서 {write}을 보여줍니다
        </div>
    )
}

• props를 불러올 필요 없이 바로 호출 가능
• props 값을 매개변수로 사용하여 값을 참조

---

📚 state

📃 state

• state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미
• state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 할 수 있음
• 일반 변수는 값이 변경될 때 html에 자동 변경되지 않지만, state는 값이 변경되면 html에 재랜더링 해줌
  => 값의 변화가 자주 있을 때 state를 사용
• 클래스형 컴포넌트는 state, 함수 컴포넌트에서는 useState를 사용

 

📃 클래스형 컴포넌트

import { Component } from "react";

class Counter extends Component {
    constructor(props) {
        super(props);

        this.state = {
            number: 0 
        };
    }
    render() {
        const cType = "클래스형 컴포넌트";
        const {number} = this.state; 
        return (
            <div>
                <h1> {cType} </h1>
                <h1> {number} </h1>
                <button
                    onClick = {() => {
                        this.setState( {number: number +1 } );
                    }}
                >
                    +1
                </button> 
            </div>
        );
    }
}

export default Counter;

• 화살표 함수로 함수를 선언할 수 있음
• 요소에 값을 적용할 때 this.을 붙여서 접근해야함

 

📃 함수형 컴포넌트

import { useState } from "react";

const Say = () => {
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage("안녕하세요!");
    const onClickLeave = () => setMessage("안녕히가세요!");

    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1> {message} </h1>
        </div>
    );
};

export default Say;

• const + 함수 형태로 선언
• this없이 요소에 적용 가능
• 한 컴포넌트에서 useState 여러 번 사용 가능
• useState 함수 인자에는 상태의 초깃값을 지정, 객체가 아니어도 괜찮음
• 함수를 호출하면 배열이 반환
  *  배열의 첫 번째 원소는 현재 상태
  *  배열의 두 번째 원소는 상태를 바꾸어주는 함수,  setter 함수

---

📚 기타

함수형 컴포넌트와 클래스형 컴포넌트는 Life Cycle과 이벤트 핸들링에서도 차이가 있습니다. 이와 관련된 포스트를 작성 후 다시 소개하도록 하겠습니다.

---

📌 정리

함수형 컴포넌트는 클래스형 컴포넌트보다 뒤에 만들어졌습니다. Hooks의 등장으로 클래스형 컴포넌트의 모든 기능을 사용하게 되어 공식 React에서도 함수형 컴포넌트 + Hooks를 권장합니다.

그러나 클래스형 컴포넌트는 알아둘 필요성이 있습니다. 클래스형 컴포넌트를 함수형 컴포넌트로 바꿀 필요는 없지만 보수하거나 유지할 때 필요합니다. React 공식 홈페이지에서 클래스 컴포넌트들을 지원할 예정이기 때문입니다.