[React] 컴포넌트 종류, 클래스형 컴포넌트의 props와 state사용하기

컴포넌트 : 프로그래밍에 있어 재사용이 가능한 각각의 모듈

 

- 컴포넌트 기반 프로그래밍을 하면 레고 블럭처럼 컴포넌트들을 조합하여 화면을 구성
- 웹 컴포넌트는 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격
- 옛날에는 클래스형 컴포넌트를 주로 사용하였으나, 요즘은 함수형 컴포넌트를 많이 씀 !

 

 

1. 함수형 컴포넌트 

1. 선언하기 편리하다.
2. 메모리 자원 사용도가 클래스형보다 작다.
3. 프로젝트 완성 후 배포할 때 결과물의 파일크기가 클래스형보다 작다.

 

구문 > 

import React from 'react';

// 1) 함수 바로쓰기
function FunCompo() {
	return (
    	<div></div>
    )
}

// 2) 화살표 함수로 쓰기
const FunCompo = () => {
	return (
    	<div></div>
    )
}

export default FunCompo;

 

2. 클래스형 컴포넌트

- render() 함수가 필수적이며, 그 안에 return문 써서 보여주어야 할 jsx 작성

 

구문 > 

import React, {Component} from 'react';

class ClassCompo extends Component {
	render() {
    	return (
        	<div></div>
        )
    }
}

export default ClassCompo;

 

 

1) 클래스형 컴포넌트의 props사용하기

☞ 클래스형 컴포넌트에서 props를 사용하려면 render 함수에서 this.props를 구조분해할당 하여 return문 안에서 사용 !

import React, {Component} from "react";

class ClassCompo extends Component {
    render() {
    	// this.props객체 구조분해할당
        const {name} = this.props;
        return (
        	// 함수형과 마찬가지로 변수는 중괄호 안에 넣어서 사용해줌
            <div>제 이름은 {name}입니다.</div>
        )
    }
}

export default ClassCompo;

 

1-1) props의 기본 값 주기 (함수형과 동일하게 작성)

// 클래스 밖에서 기본 값 주기
// 클래스명.defaultProps
ClassComponent.defaultProps = {
	name: "abc"
}

// 클래스 안에서 기본 값 주기
// static defaultProps
class ClassCompo extends Component {
	static defaultProps = {
        name: "abc"
    }
    render() {
        const {name} = this.props;
        return (
            <div>제 이름은 {name}입니다.</div>
        )
    }
}

1-2) props의 데이터 타입 지정하기

// 클래스 밖에서 주고 싶을 때
// 클래스명.propTypes
lassComponent.propTypes = {
	// .isRequired : 해당 props가 필수 속성이라는 뜻 (없으면 콘솔창에서 뭐라 함..)
    name: propTypes.string.isRequired
    
// 클래스 안에서 주고 싶을 때
// static propTypes
class ClassCompo extends Component {
	static propTypes = {
        name: propTypes.string
    }
    render() {
        const {name} = this.props;
        return (
            <div>제 이름은 {name}입니다.</div>
        )
    }
}

↓ propTypes ↓

1. array : 배열

2. bool : true or false

3. func : 함수

4. number : 숫자

5. string : 문자열

6. object : 객체

7. any : 아무 종류

 

2) 클래스형 컴포넌트의 state사용하기

☞ 클래스형 컴포넌트에서 state를 사용하려면 render 함수에서 this.state를 구조분해할당 하여 return문 안에서 사용 !

import React, {Component} from "react";

class ClassCounter extends Component {
    state = {
        number: 0
    }
    render() {
    	// this.state객체 구조분해할당
        const {number} = this.state;
        return (
            <div>
                // 함수형과 마찬가지로 변수는 중괄호 안에 넣어서 사용해줌
                <h2>{number}</h2>
                // number의 상태를 업데이트 해주고 싶을 때 this.setState함수 호출 
                <button onClick={() => {
                    this.setState({number: number + 1})
                }}>+1</button>
            </div>
        )
    }
}

export default ClassCounter;