[React] State

 

State란?

✨ React의 핵심 개념

 

- 리액트 컴포넌트의 변경 가능한 데이터

- 개발자가 직접 정의한다

- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다(나머지는 instance에 정의하면 된다)

- state는 자바스크립트 객체이다

 

// 클래스 컴포넌트
class LikeButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            liked: false
        };
    }
}

 

 

state는 한번 정의되면 직접 수정하면 안 된다(setState 함수를 통해 수정해야 한다)

 

//직접 수정한 잘못된 예시
this.state = {
    name: 'yeonsu'
};

//setState 함수를 이용한 올바른 예시
this.setState ({
    name: 'yeonsu'
});

---

Lifecycle

- 리액트 컴포넌트의 생명주기

 

 

Mounting	Updating	Unmounting
constructor(생성자)	render
componentDidMount	componentDidUpdate	componentWillUnmount

 

 

---

React state 실습하기

 

Notification.jsx

import React from "react";

const styles = {
    wrapper: {
        margin: 8,
        padding: 8,
        display: "flex",
        flexDirection: "row",
        border: "1px solid grey",
        borderRadius: 16,
    },

    messageText: {
        color: "black",
        fontSize: 16,
    },
};

class Notification extends React.Component {
    constructor(props) {
        super(props);

        this.state = {};
    }


    // 생명 주기
    componentDidMount() {
        console.log(`${this.props.id} componentDidMount() is called.`);
    }
    componentDidUpdate() {
        console.log(`${this.props.id} componentDidUpdate() is called.`);
    }

    componentDidUnMount() {
        console.log(`${this.props.id} componentDidUnMount() is called.`);
    }


    render() {
        return  (
            <div style={styles.wrapper}>
                <span style={styles.messageText}>{this.props.message}</span>
                </div>
        );
    }
}

export default Notification;

 

NotificationList.jsx

 

import React from "react";
import Notification from "./Notification";

const reserveNotifications = [
    {   id: 1,
        message: "안녕하세요, 오늘 일정을 알려드립니다.",
    },
    {   id: 2,
        message: "점심식사 시간입니다.",
    },
    {   id: 3,
        message: "이제 곧 퇴근 시간입니다 :>",
    },
];

var timer;

class NotificationList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {      //생성자에서는 앞으로 사용할 데이터를 생성자에 넣어서 초기화한다
            notifications: [],
        };
    }

    componentDidMount() {
        const { notifications } = this.state;
        timer = setInterval(() => {
            if (notifications.length < reserveNotifications.length) {
                const index = notifications.length;
                notifications.push(reserveNotifications[index]);
                this.setState({     //state를 업데이트 하기 위해 setState 함수 사용
                    notifications: notifications,
                });
            } else { 
                clearInterval(timer);
            }
        }, 1000);
    }
    

    render() {
        return (
            <div>
                {this.state.notifications.map((notification) => {
                    return <Notification 
                    key={Notification.id}
                    id={notification.id}
                    message={notification.message}/>;
                })}
            </div>
        );
    }
}



export default NotificationList;

 

1000ms마다 알림이 나타난다

 

React Dev Tools를 이용하면 각 컴포넌트를 눌렀을 때 props와 state 확인 가능하다!