[React] State and Lifecycle

State (react의 핵심중의 핵심)

- 한글로 상태라는 뜻
- 리액트에서는 Component의 상태
- 리택트 Component에서 변경 가능한 데이터
- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함!
- State는 JavaScript 객체이다
- 직접 수정할 수 없다 (수정하면 안된다.)

- constructor (생성자)

 

 

 

 

Lifecycle

- 생명주기 라는 뜻
- 리액트 Component의 생명주기
- Component가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.

 

 

 

State 실습

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 = {};
    }

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

export default Notification;

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

const reservedNotifications = [
    {
        message: "안녕하세요 오늘의 일정을 알려드리겠습니다.",
    },
    {
        message: "점심식사 시간입니다.",
    },
    {
        message: "이제 곧 미팅이 시작됩니다.",
    },
];

var timer;

class NotificationList extends React.Component {
    constructor(props) {
        super(props);
        
        // 처음 빈 배열을 넣어 초기화
        this.state = {
            notifications: [],
        };
    }

    // setInterval을 이용하여 1초마다 정해진 작업
    // 미리 만들어둔 알림 데이터 배열 reservedNodification 로 부터
    // 알림 데이터를 하나씩 가져와서 state에 있는 notifications 배열에 넣고 업데이트
    componentDidMount() {
        const { notifications } = this.state;
        timer = setInterval(() => {
            if (notifications.length < reservedNotifications.length) {
                const index = notifications.length;
                notifications.push(reservedNotifications[index]);
                this.setState({ // state 업데이트를 위해 setState
                    notifications: notifications,
                });
            } else {
                clearInterval(timer);
            }
        }, 1000);
    }

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

export default NotificationList;

 

constructor는 일종의 생성자라고 보면 된다. 먼저 state()로 초기화 한 후, setInterval을 통해 배열에 원하는 데이터값을 하나씩 넣으면서 setState()로 업데이트를 한다. state()로는 업데이트를 하면 안된다.

 

 

 

1초에 하나씩 메세지가 생기는 걸 확인할 수 있다.

 

 

 

 

Lifecycle 실습

class Notification extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {};
    }

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

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

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

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

생명 주기를 확인할 수 있는 함수를 작성한다. componentDidmount()는 마운트 되었을 시, componentDidUpdate()는 컴포넌트가 업데이트 되었을 시, componentWillUnmount()는 컴포넌트가 언마운트 되었을 시에 실행된다.

 

 

 

 

const reservedNotifications = [
    {
        id: 1,
        message: "안녕하세요 오늘의 일정을 알려드리겠습니다.",
    },
    {
        id: 2,
        message: "점심식사 시간입니다.",
    },
    {
        id: 3,
        message: "이제 곧 미팅이 시작됩니다.",
    },
];


/ .... /


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

헷깔리지 않도록 메세지에 id 값을 주고, 렌더링 시, Notification에 키와 아이디값을 요소에 설정한다.

 

 

그럼 다음과 같이 터미널의 콘솔창에 나타난다. 첫번째 메세지가 마운트되고, 2번째 메세지가 마운트되어 나타나면 첫번째 메세지도 업데이트 된다. 3번째 메세지가 마운트되어 나타나면, 1,2번 메세지 역시 업데이트된다.

 

 

 

 

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

but 컴포넌트가 언마운트되었을 시, componentWillUnmount() 함수를 실행하는데, 위의 작업은 componentWillUnmount()가 실행되지 않았다. 그 이유는 언마운트 된 컴포넌트가 없기 때문이다. 그래서 모든 업데이트가 끝난 후, 부분에 setState() 로 notifications 배열을 빈 배열로 만든다.

 

 

 

모든 작업 이후, notifications 배열이 빈 배열로 바뀌었기 때문에, 1,2,3번 메세지는 언마운트된다. 콘솔창에서 확인할 수 있다.