React의 State

State? Props?

props는 상위 컴포넌트에서 하위 컴포넌트로 전달 해 주어서, 하위 컴포넌트에서 해당하는 값을 노출 시킬 수 있도록 해 줌
props는 상위 컴포넌트에서 하위 컴포넌트로 전달 해 주는 값 이기 때문에, 실제로 props가 사용되는 컴포넌트 내부에서는 그 값을 바꿀 수 없음
state는 리액트 컴포넌트 "내부" 에서 바꿀 수 있는 값을 의미

클래스형 컴포넌트의 State

State를 사용하기 위해서는 클래스 내부에 아래와 같이 선언 해 준다

constructor(props) {
    super(props);
    this.state = {
        number: 0,
    };
}

실제 사용되는 모습

import React, { Component } from "react";
 
export default class TestStateClassComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number: 0,
        };
    }
 
    render() {
        const { number } = this.state;
 
        return (
            <div>
                <h4>{number}</h4>
 
                <button
                    onClick={() => {
                        this.setState({ number: number + 1 });
                    }}
                >
                    +1
                </button>
            </div>
        );
    }
}

함수형 컴포넌트의 State

함수형 컴포넌트에서 state를 사용하기 위해 아래와 같이 작업 해 준다

import React, { useState } from "react";
 
const [message, setMessage] = useState();

실제 사용되는 모습

import React, { useState } from "react";
 
export default function TestFuncComponent() {
    const [message, setMessage] = useState();
    const onClickEnter = () => setMessage("안녕하세요!");
    const onClickLeave = () => setMessage("안녕히가세요!");
 
    return (
        <div>
            <h3>{message}</h3>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
        </div>
    );
}

state에 기본 값을 넣어 줄 수 도 있다

const [message = "React입니다", setMessage] = useState();

Recommended for You

React의 Component

2021-12-24

React 시작하기

2021-12-24