[React]  Component, props, state 이해

[React] Component, props State 이해

---

♣ Componet

• Component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다.
• Component는 'props'라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다.
• Element는 일반 객체(plain object)로 React 앱의 가장 작은 단위다. Element는 Component의 '구성 요소'다.
• 컴포넌트를 선언하는 방식에는 함수형 Component와 클래스형 Component가 있다.

 

♣ props

• Component는 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터다.
• props는 Component에서 Component로 전달하는 데이터다. Component의 속성으로, 해당 Component를 불러와 사용하는 부모 Component에서만 설정 가능하다.

 

♣ state

• state는 Component 내부의 동적 데이터를 의미한다. props는 부모 Component가 설정하는 값으로 Component 자신은 props를 읽기 전용으로만 사용할 수 있다.
• state를 사용하는 방식에는 Component의 종류에 따라 2가지가 있다. 클래스형 Component에서는 Component 자체가 state를 지니는 방식으로 사용한다. 함수형 Component에서는 useState라는 함수, Hook을 통해 사용한다.

 

---

 

1. 함수형 Component

 

- React.Component 클래스를 상속받지 않으므로 Componet를 import하지 않아도 된다.

- state, life cycle 기능이 없다.

- 값을 가져와서 보여주는 용도로 주로 사용한다.

- 장점

1) 초기 마운트 속도가 미세하게 빠르다.

2) 불필요한 기능이 없기 때문에 메모리 자원을 적게 사용.

 

import React from "react";

// 함수형 컴포넌트
const MyName2 = ({ name }) => {
    return <div>안녕하세요! 제 이름은 {name} 입니다.</div>;
}

MyName2.defaultProps = {
    name: '기본이름'
}

export default MyName2;

 

 

2. 클래스형 Component

 

- React.Component 클래스를 상속 받는 것으로 기본 형태를 갖춘다.

- 컴포넌트는 jsx를 반환해야하는데, 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JSX를 반환하기 위해 render() 함수를 사용한다. 리액트는 클래스형 컴포넌트의 render() 함수를 자동으로 실행시킨다.

 

import React, { Component } from 'react';

// 클래스형 컴포넌트
class MyName extends Component {

    // 더 최신 문법
    static defaultProps = {
        name: '기본이름'
    }

    render() {
        return (
            <div>
                안녕하세요! 제 이름은 {this.props.name} 입니다.
            </div>
        )
    }
}

// 예전 문법 - 위와 동일
// MyName.defaultProps = {
//     name: '기본이름'
// }

export default MyName;

 

 

---

 

1. 클래스형 Component에서 state 사용법

 

- state는 Componet 내부에 지니는 값으로 setState 함수를 통해 값을 설정한다.

- 화살표 함수를 사용하지 않으면 this값을 읽어올 수 없다.

- 화살표 함수를 사용하지 않고 this값을 사용하기 위해서는 constructor함수를 사용해서 bind 해주어야 한다.

 

import React, {Component} from "react";

class Counter extends Component {

    // props는 읽기전용인 반면, state는 내부에서 변경할 수 있다. 
    // 변경할 떄는 언제나 setState()라는 함수를 사용한다.
    // state는 객체이어야 한다.
    state = {
        number: 1
    }

    // 화살표 함수를 사용하지 않으면 this값을 읽어올 수 없다.
    // 화살표 함수를 사용하지 않고 this를 사용하려면 아래와 같이 this를 bind 해주어야 한다.
    constructor(props) {
        super(props);
        this.handleIncrease = this.handleIncrease.bind(this);
        this.handleDecrease = this.handleDecrease.bind(this);
    }

    handleIncrease = () => {
        this.setState({
            number: this.state.number+1
        })
    }

    handleDecrease = () => {
        this.setState({
            number: this.state.number-1
        })
    }

    render() {
        return (
            <div>
                <h1>카운터</h1>
                <div>값: {this.state.number}</div>
                <button onClick={this.handleIncrease}>+</button>
                <button onClick={this.handleDecrease}>-</button>
            </div>
        )
    }
}

export default Counter;