Home
Frontend
React의 State
울이
울이
December 24, 2021
1 min

Table Of Contents

01
State? Props?
02
클래스형 컴포넌트의 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();

Tags

#React#Javascript
Previous Article
몽고디비 클러스터 구성하기
Next Article
React의 Component
울이

울이

개발자 울이

경험하고 사용하고 개선하는 것, 그리고 소통하면서 성장하는 것을 좋아합니다.

Expertise

Backend
Frontend
Data Engineering

Social Media

githublinkedinwebsiteinstagram

Related Posts

React의 Component
React의 Component
December 24, 2021
1 min
© 2022, All Rights Reserved.

Quick Links

Home

Social Media